Wie bekomme ich diese beiden Divs nebeneinander?

110

Ich habe zwei Divs, die nicht untereinander verschachtelt sind. Sie befinden sich beide innerhalb eines übergeordneten Divs, und dieses übergeordnete Div wiederholt sich. Also im Wesentlichen:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Ich möchte jedes Paar child_div_1und child_div_2nebeneinander bekommen . Wie kann ich das machen?

css layout html Justin Meltzer
quelle

Antworten:

82 
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/c6242/1/

Hussein
quelle
1
Er möchte, dass die Kinder nebeneinander ausgerichtet sind, nicht die Eltern (zumindest war das mein Verständnis ...)
ehdv
4
Ich denke display: table-cellimmer noch, dass die Ergebnisse näher an dem liegen werden, was er meint (seitdem haben sie die gleiche Höhe usw.), aber dieser Weg wird sicherlich funktionieren.
ehdv
@ehdv display: table-cellwird in IE6 IE7 nicht unterstützt. float: left; ist der richtige Weg, dies zu tun.
Hussein
Tatsächlich ist dies in IE6,7 der richtige Weg <tr><td>, da jede andere Option unterbrochen wird, wenn der Benutzer die Fenstergröße ändert. In modernen Browsern display: inline-blockist dies normalerweise die beste Option.
John Henckel
126

Da divs standardmäßig blockElemente sind - was bedeutet, dass sie die gesamte verfügbare Breite einnehmen - versuchen Sie es mit -

display:inline-block;

Das divwird jetzt inline gerendert, dh es stört den Elementfluss nicht, wird aber dennoch als Blockelement behandelt.

Ich finde diese Technik einfacher als mit floats zu ringen .

Weitere Informationen finden Sie in diesem Tutorial - http://learnlayout.com/inline-block.html . Ich würde sogar die vorherigen Artikel empfehlen, die zu diesem Artikel führen. (Nein, ich habe es nicht geschrieben)

Robin Maben
quelle
Diese Lösung hat mir sehr gut gefallen. Mein einziges Problem dabei ist, dass die Unterseite beider Divs ausgerichtet wird, anstatt die Oberseite auszurichten. Gibt es auch dafür eine schnelle Einstellung?
Chris
Ich würde vorschlagen, 2 Wrapper divmit gleicher Höhe zu verwenden, damit der Inhalt in ihnen oben ausgerichtet erscheint.
Robin Maben
2
Genau. Dies ist viel besser als float:leftweil es Ihnen so viel mehr Optionen bietet, ohne Ihr gesamtes Layout neu zu definieren. Die Dinge "funktionieren einfach" so. Überprüfen Sie es hier: jsfiddle.net/SrAQd/4
Jerry
12
Um eine vertikale Ausrichtung zu erhalten, würde ich "vertikal ausrichten: oben" hinzufügen.
Cdiggins
@ Chris: Ja, ich stimme cdiggins zu. Das sollte dir helfen.
Robin Maben
44

Ich fand den folgenden Code sehr nützlich, er könnte jedem helfen, der hier sucht

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Erweitern Sie das Snippet

Axt
quelle
11

Mit Flexbox ist das ganz einfach!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Geigenbeispiel

Sol
quelle
6

Den Stil verwenden

.child_div_1 {
    float:left
}
amit_g
quelle
5

Das Beste, was für mich funktioniert:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

jiantongc
quelle
2

Flexbox verwenden

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
dasfdsa
quelle