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?
Antwort
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
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
@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. –
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
Sie sollten einen Blick auf:
display: inline-block
Wie Mark sagte, Baseline aligment zu vermeiden:
vertical-align: top
genial! aber schau, was passiert, wenn ich etwas Inhalt hinzufügen http://jsfiddle.net/xvcDT/ – devotchkah
Inline-Elemente sind immer am Ende der Zeile positioniert. Sie können die Höhe manuell einstellen. – Raffael
Inline-Elemente _default_ zur Grundlinien-Vertikalpositionierung. Sie können vertikal ausrichten: oben; http://jsfiddle.net/rFwtv/3/ – Mark
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. –