Nicht genug Information. Wie breit sind die Schichten?
Josh Stodola
8
Ich würde display: inline-blockdiese Jungs lieber als sie schweben lassen. Wenn ihre Breite insgesamt kleiner als die Behälterbreite ist, sitzen sie nebeneinander.
Was ist, wenn Sie möchten, dass alle beim Erweitern der Seite erweitert werden?
CodyBugstein
31
@imray verwenden Sie nur% anstelle von px
TehTris
9
Könnten Sie näher erläutern, warum Sie <br style="clear: left;" />diesen Stil besonders verwenden sollten?
Mike de Klerk
2
@MikedeKlerk Es ist ein Clearfix, um zu vermeiden, dass das übergeordnete Element zusammenbricht.
Angel Politis
Wie @Nick Craver erklärte, sollten Sie allen Ihren Elementen die Eigenschaft float: left geben . Dies geschieht, weil die Eigenschaft float angibt, wie das Element links oder rechts vom übergeordneten Container platziert wird .
Aber DIV ist ein Element auf Blockebene, oder? Wie kommt es dann, dass sie nebeneinander und nicht in den nächsten Zeilen platziert werden (da Elemente auf Blockebene mit einem Zeilenumbruch beginnen und enden). Hat Float auch einen anderen Einfluss darauf?
Ashwin
26
schweben sie alle links
Stellen Sie sicher, dass eine Breite angegeben ist, die alle in ihren Container passen (entweder ein anderes div oder das Fenster), da sie sonst umbrochen werden
Dieser Code, den jemand dort oben gepostet hat, hat es geschafft !!! Wenn ich es kurz vor dem Schließen des Container-DIV einfüge, wird verhindert, dass sich alle nachfolgenden DIVs mit den DIVs überschneiden, die ich oben nebeneinander erstellt habe!
<div><divclass="left"></div><divclass="left"></div>
...
...
<divclass="left"></div><!-- then magic trick comes here --><brstyle="clear: left;"/></div>
Der Punkt ist, dass meine Antwort die richtigste ist und wenn eine neue Person diese Frage im Internet sucht, wird sie auf meine Antwort stoßen, die für sie am hilfreichsten wäre.
Arwen
2
Das könnte sein. Aber es fehlt jede Erklärung. Auf dieser Site ist es in Ordnung, andere Antworten zu kopieren und mehrere Teilantworten zu einer kombinierten besseren Antwort zusammenzuführen. Sie können Ihre bearbeiten und vervollständigen. Neue Benutzer haben jedoch einige Einschränkungen (Upvoting, wenige Links), daher würde ich dennoch empfehlen, sich nicht auf alte und beantwortete Fragen zu konzentrieren.
cfi
@cfi danke, ich werde es für zukünftige Referenz behalten.
Arwen
10
Normalerweise schwebe ich nur den ersten nach links, den zweiten nach rechts. Der dritte richtet sich dann automatisch zwischen ihnen aus.
Verursacht das nicht Probleme, wenn die Größe des Browsers geändert wird?
CodyBugstein
10
<style>.left-column
{float:left;width:30%;background-color:red;}.right-column
{float:right;width:30%;background-color:green;}.center-column
{margin:auto;width:30%;background-color:blue;}</style><divid="container"><sectionclass="left-column">THIS IS COLUMN 1 LEFT</section><sectionclass="right-column">THIS IS COLUMN 3 RIGHT</section><sectionclass="center-column">THIS IS COLUMN 2 CENTER</section></div>
Der Vorteil dieser Methode ist, dass Sie jede Spaltenbreite unabhängig von der anderen festlegen können, solange Sie sie unter 100% halten. Wenn Sie 3 x 30% verwenden, werden die verbleibenden 10% als 5% -Teiler zwischen den Spalten aufgeteilt
AKTUALISIERT: Um diese Technik zu verwenden und aufgrund der absoluten Positionierung, müssen Sie natürlich die Divs in einen Container einschließen und eine Nachbearbeitung durchführen, um die Höhe von if zu definieren.
jQuery (Dokument) .ready (function () {jQuery ('. main'). height (Math.max (jQuery ('. column-left'). height (), jQuery ('. column-right'). height (), jQuery ('. column-center'). height ()));}); Nicht das Erstaunlichste auf der Welt, aber zumindest bei älteren IEs nicht kaputt.
Jpbourbon
4
Aber funktioniert es in Chrome?
Schweben Sie jedes Div und setzen Sie es frei, beide für die Reihe. Sie müssen keine Breiten einstellen, wenn Sie dies nicht möchten. Funktioniert in Chrome 41, Firefox 37, IE 11
<divclass="stack"><divclass="row"><divclass="col">
One
</div><divclass="col">
Two
</div></div><divclass="row"><divclass="col">
One
</div><divclass="col">
Two
</div><divclass="col">
Three
</div></div></div>
@Leniel diese Methode ist gut, aber Sie müssen allen schwebenden Divs Breite hinzufügen. Ich würde sagen, machen Sie sie gleich breit oder weisen Sie eine feste Breite zu. Etwas wie
.content-wrapper > div { width:33.3%;}
Sie können jedem Div Klassennamen zuweisen, anstatt sie hinzuzufügen inline style , was keine gute Vorgehensweise ist.
Stellen Sie sicher, dass Sie ein Clearfix-Div oder ein Clear-Div verwenden, um zu vermeiden, dass der folgende Inhalt unter diesen Divs bleibt.
Details zur Verwendung von clearfix div finden Sie hier
display: inline-block
diese Jungs lieber als sie schweben lassen. Wenn ihre Breite insgesamt kleiner als die Behälterbreite ist, sitzen sie nebeneinander.Antworten:
Geben Sie ihnen einfach eine Breite und
float: left;
hier ein Beispiel:quelle
<br style="clear: left;" />
diesen Stil besonders verwenden sollten?Der moderne Weg ist die Verwendung der CSS-Flexbox , siehe Support-Tabellen .
Sie können auch das CSS-Raster verwenden (siehe Supporttabellen) .
quelle
Es ist genauso wie bei den beiden Divs, schweben Sie einfach den dritten nach links oder rechts.
quelle
schweben sie alle links
Stellen Sie sicher, dass eine Breite angegeben ist, die alle in ihren Container passen (entweder ein anderes div oder das Fenster), da sie sonst umbrochen werden
quelle
Dieser Code, den jemand dort oben gepostet hat, hat es geschafft !!! Wenn ich es kurz vor dem Schließen des Container-DIV einfüge, wird verhindert, dass sich alle nachfolgenden DIVs mit den DIVs überschneiden, die ich oben nebeneinander erstellt habe!
Tadaa !! :) :)
quelle
Schweben Sie alle drei Divs nach links. Wie hier:
quelle
Normalerweise schwebe ich nur den ersten nach links, den zweiten nach rechts. Der dritte richtet sich dann automatisch zwischen ihnen aus.
quelle
Der Vorteil dieser Methode ist, dass Sie jede Spaltenbreite unabhängig von der anderen festlegen können, solange Sie sie unter 100% halten. Wenn Sie 3 x 30% verwenden, werden die verbleibenden 10% als 5% -Teiler zwischen den Spalten aufgeteilt
quelle
Sie können schweben: links für alle und die Breite auf 33,333% einstellen
quelle
Versuchen Sie, dem Stil "display: block" hinzuzufügen
quelle
Ich habe die Bootstrap-Antwort nicht gesehen, also für das, was es wert ist:
Lassen Sie Bootstrap die Prozentsätze herausfinden. Ich möchte beide löschen, nur für den Fall.
quelle
Ich bevorzuge diese Methode, Floats werden in älteren Versionen von IE schlecht unterstützt (wirklich? ...)
AKTUALISIERT: Um diese Technik zu verwenden und aufgrund der absoluten Positionierung, müssen Sie natürlich die Divs in einen Container einschließen und eine Nachbearbeitung durchführen, um die Höhe von if zu definieren.
Nicht das Erstaunlichste auf der Welt, aber zumindest bei älteren IEs nicht kaputt.
quelle
Aber funktioniert es in Chrome?
Schweben Sie jedes Div und setzen Sie es frei, beide für die Reihe. Sie müssen keine Breiten einstellen, wenn Sie dies nicht möchten. Funktioniert in Chrome 41, Firefox 37, IE 11
Klicken Sie für JS Fiddle
HTML
CSS
quelle
So habe ich es geschafft, in einem
<footer>
Element etwas Ähnliches zu tun :CSS:
quelle
@Leniel diese Methode ist gut, aber Sie müssen allen schwebenden Divs Breite hinzufügen. Ich würde sagen, machen Sie sie gleich breit oder weisen Sie eine feste Breite zu. Etwas wie
Sie können jedem Div Klassennamen zuweisen, anstatt sie hinzuzufügen
inline style
, was keine gute Vorgehensweise ist.Stellen Sie sicher, dass Sie ein Clearfix-Div oder ein Clear-Div verwenden, um zu vermeiden, dass der folgende Inhalt unter diesen Divs bleibt.
Details zur Verwendung von clearfix div finden Sie hier
quelle