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

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

5

Najlepsze, co działa dla mnie:

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

 .right{
   margin-left:140px;
 }

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

— jiantongc
źródło

2

float:leftWłasność użytkownika w podrzędnej klasie DIV

sprawdź szczegółowo strukturę div: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
źródło

2

Korzystanie z Flexbox

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

— dasfdsa
źródło