CSS verkleinern container Größe zwei Breite dynamisch divs
Dies ist, was ich versuche zu erreichen
CONTAINER -------------------------------------------------------------- | ZENTRIERT im CONTAINER | | ----------------------------------------- ---------- | | | Content-Div | | Info-Div | | | | verkleinert, um Inhalte ODER | | schrumpfen| | | | max Größe: (container-Breite - info div ) | | Inhalt | | | | | ---------- | | ----------------------------------------- | | | | ------------------------------------------------------ | | | text-div: width = Breite des content-div + info-div | | | ------------------------------------------------------ | --------------------------------------------------------------
BILDER (roh MSPAINT): kleine content-Beispiel und große content-Beispiel
DIV INFO: Max 192 Pixel, sollte aber verkleinern, wenn nötig.
DIV-INHALT: Shrink to content. Wenn der Inhalt ist groß, width= noch Platz im container.
DIV TEXT: width = Breite des INHALTS + Breite INFO.
Hier ist, was ich habe, so weit. Ich bin nicht mit Schwimmern, weil ich will die content-und info-divs werden insgesamt auf der Seite zentriert.
Die Probleme, die ich habe sind:
- der text div erweitert, um die container-Größe.
- wenn das browser-Fenster verkleinert wird, werden die info-div bekommt stieß auf die nächste
line.
CSS
#container {
width: 80%;
min-width: 760px;
padding-top: 0;
margin: 0 auto;
}
#content {
max-width: 71%; /* Kinda solves the problem of bumping info div
to next line, but leave awkward gaps */
width: auto;
vertical-align: top;
display: inline-block;
}
#info {
width: auto;
vertical-align: top;
text-align: left;
display: inline-block;
}
#text {
margin: 10px auto;
width: auto;
display: block;
text-align: left;
}
HTML
<div id="container">
<div id="main">
<div id="content"><img src="image.jpg" />Lorem ipsum ...</div>
<div id="info">Lorem ipsum dolor</div>
<div id="text">Lorem ipsum ...</div>
</div>
</div>
- ASCII-Kunst wireframes lassen mich lächeln.
- Ich denke, ich könnte Größe dynamisch in Javascript, aber ich Frage mich, ob gibt es eine elegante CSS-Lösung.
- Nur quick-Tipp: haben Sie bemerkt, dass Sie <div class="container"> und Sie gelten mit css: #container, obwohl Sie verwenden sollten .die container?
- T_T, ich habe gerade 10 Minuten, die Fehler zu finden
- Ist es möglich zu akzeptieren, zwei Antworten? Shaz und Myles Grau jeweils ein Teil der Gesamtlösung. Vielen Dank an Euch beide!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen Sie dies:
http://jsfiddle.net/JbuBC/2/http://jsfiddle.net/JbuBC/14/
Hinzufügen
float:left;
zu#info
und#content
Entfernen
max-width: 71%;
aus#content
HTML-code wäre eine gute Hilfe, wenn Sie etwas haben?
Demo
Machen #Breite des Textes entspricht Inhalt+Info Breite, die Sie brauchen, um die wrap #content, #info, #text mit einem weiteren div.