Jak ustawić te dwa elementy div obok siebie?

110

Mam dwa elementy div, które nie są zagnieżdżone, jeden pod drugim. Oba znajdują się w jednym nadrzędnym elemencie DIV, który się powtarza. Więc zasadniczo:

<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>

Chcę dostać każdą parę child_div_1i child_div_2obok siebie. W jaki sposób mogę to zrobić?

css layout html Justin Meltzer
źródło

Odpowiedzi:

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;
}

Sprawdź działający przykład pod adresem http://jsfiddle.net/c6242/1/

Hussein
źródło
1
Chce, aby dzieci były ustawione obok siebie, a nie rodzice (przynajmniej tak rozumiałem ...)
ehdv
4
Nadal myślę, display: table-cellże wyniki będą bliższe temu, co miał na myśli (od tego czasu będą miały tę samą wysokość itp.), Ale ten sposób z pewnością zadziała.
ehdv
@ehdv display: table-cellnie jest obsługiwane w IE6 IE7. float: left; jest właściwym sposobem, aby to zrobić.
Hussein,
Właściwie właściwym sposobem na zrobienie tego w IE6,7 jest użycie <tr><td>, ponieważ każda inna opcja zepsuje się , gdy użytkownik zmieni rozmiar okna. W nowoczesnych przeglądarek display: inline-blockjest zwykle najlepszym rozwiązaniem.
John Henckel
126

Ponieważ elementy div są domyślnie blockelementami - co oznacza, że ​​zajmują pełną dostępną szerokość, spróbuj użyć -

display:inline-block;

divTeraz wygenerowana rolki czyli nie zakłócać przepływu elementów, lecz nadal będzie traktowany jako element bloku.

Uważam, że ta technika jest łatwiejsza niż walka z floats.

Zobacz ten samouczek, aby uzyskać więcej informacji - http://learnlayout.com/inline-block.html . Poleciłbym nawet poprzednie artykuły, które do tego prowadzą. (Nie, nie napisałem tego)

Robin Maben
źródło
Bardzo podobało mi się to rozwiązanie. Moim jedynym problemem jest to, że wyrównuje dolną część obu elementów div zamiast wyrównywać górę. Czy istnieje również szybkie ustawienie?
Chris,
Sugerowałbym użycie 2 opakowań divo równej wysokości, aby zawartość w nich wyglądała na wyrównaną do góry.
Robin Maben
2
Zgadzam się. Jest to o wiele lepsze niż float:leftto, że daje o wiele więcej opcji bez ponownego definiowania całego układu. Rzeczy „po prostu działają” w ten sposób. Sprawdź to tutaj: jsfiddle.net/SrAQd/4
Jerry
12
Aby uzyskać wyrównanie w pionie, dodałbym "vertical-align: top;"
cdiggins
@Chris: Tak, zgadzam się z cdiggins. To powinno ci pomóc.
Robin Maben
44

Poniższy kod uważam za bardzo przydatny, może pomóc każdemu, kto szuka tutaj

<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>
Rozwiń fragment

topory
źródło
11

Korzystanie z Flexbox jest super proste!

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

Przykład skrzypiec

Sol
źródło
6

Korzystanie ze stylu

.child_div_1 {
    float:left
}
amit_g
źródło
2

Korzystanie z Flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
dasfdsa
źródło