2013-02-20 15 views
11

Wie kann ich divs nebeneinander positionieren, ohne Float zu verwenden? Ich frage, weil ich ein paar Mal gelesen habe, dass ich Float nicht verwenden soll. Oder ist Float in diesem speziellen Fall immer noch der beste Weg, Elemente zu positionieren?Zweispaltiges Layout ohne schwebende Elemente?

+1

Für allgemeine Layoutzwecke, die Schwimmer sind die einfachste und sicherste Option für Spalten zu schaffen. Für Datengrids und HTML-E-Mails sind Tabellen die geeignete Methode zum Erstellen von Spalten. Darüber hinaus kommt es darauf an, welchen spezifischen Bedarf Sie jeweils haben. –

Antwort

0

Sie haben ein paar Optionen ...

  • Absolute Positionierung COL1 Breite: 50% links: 0% COL2 Breite: 50% links: 50%
  • Feste Positionierung „gleiche wie oben, aber interferieren mit Blättern“
  • Ein Tabellen-Layout, obwohl Puristen protestieren wird, wird es funktionieren richtig
+0

erste Option scheint zu arbeiten, aber jetzt habe ich ein anderes Problem. Die zwei Divs befinden sich in einem Wrapperdiv mit fester Breite und Füllung. Absolute Positionierung beendet das Padding – devotchkah

+0

@devotchkah - Sie können den absoluten Divs, die dem Padding der äußeren Wrapper entsprechen, einen Rand nach links und einen Rand nach rechts hinzufügen. –

+1

Ja, ich glaube, das würde funktionieren, aber ich habe dem Wrapper Padding hinzugefügt, nur damit ich keine Ränder oder Padding zu einem anderen div hinzufügen muss, weißt du? – devotchkah

16

http://jsfiddle.net/9LaJt/

Sie sollten einen Blick auf:

display: inline-block 

Wie Mark sagte, Baseline aligment zu vermeiden:

vertical-align: top 
+0

genial! aber schau, was passiert, wenn ich etwas Inhalt hinzufügen http://jsfiddle.net/xvcDT/ – devotchkah

+0

Inline-Elemente sind immer am Ende der Zeile positioniert. Sie können die Höhe manuell einstellen. – Raffael

+5

Inline-Elemente _default_ zur Grundlinien-Vertikalpositionierung. Sie können vertikal ausrichten: oben; http://jsfiddle.net/rFwtv/3/ – Mark

Verwandte Themen