CSS ausrichten drei divs horizontal

Ich bin ein Problem mit drei divs Ausrichten innerhalb eines übergeordneten div, die Wirkung I brauchen, ist die folgendeCSS ausrichten drei divs horizontal

|IMAGE| +TEXT+ |IMAGE|

Jedes div ein Bild enthält, (2) und den Text (1) beziehungsweise. Das Ausrichten ist einfach, das Problem ist, dass ich möchte, dass der CENTER div automatisch auf die Größe des Browserfensters skaliert und die anderen IMAGE divs immer auf der rechten bzw. linken Seite hält.

So etwas wie dies zum Beispiel, wenn der Benutzer das Fenster maximiert:

Wie Sie sehen können, ist die Idee, dass das Zentrum div wächst, und die automatische Breite, aber die Struktur zu halten.

Wie könnte ich dieses Verhalten bekommen? Danke im Voraus.

Quelle

2010-09-02 lidermin

#container { text-align: center; } 
#div-1 { float: left; } 
#div-2 { display: inline; } 
#div-3 { float: right; }

Wenn sich das immer noch nicht wie gewünscht verhält, geben Sie bitte detailliertere Anforderungen an.

Quelle

2010-09-02 15:31:49

Das ist genau das, was ich suchte. Ich hatte den Div-2 Display Inline Part verpasst. Vielen Dank. – lidermin

Nur ein FYI, Sie könnten 'display: Inline-Block;' anstelle von 'Display: Inline;' verwenden, wenn Ihre DIVs Inhalt leer sind und Sie sie nur verwenden, um Hintergrundbilder zu halten. Mir ist klar, dass das bei der gestellten Frage nicht der Fall ist, aber es ist eine Sache, die viele Leute anlockt. –

Hier ist eine weitere Inline-Implementierung für drei Bilder nebeneinander:

<div style="text-align:center"> 

    <div style="float: left"><img src="image1.png"/></div> 

    <div style="display: inline"><img src="image2.png"/></div> 

    <div style="float: right"><img src="image3.png"/></div> 

</div>

Quelle

2012-07-30 14:50:45 Ian

+16

Das scheint genau die gleiche Implementierung nur mit den Stilen inline zu sein. – Jack

CSS ausrichten drei divs horizontal

Antwort

Verwandte Themen