Как разместить эти два блока рядом?

110

У меня есть два div, которые не вложены, один под другим. Оба они находятся в одном родительском div, и этот родительский div повторяется. Итак, по сути:

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

Я хочу поставить каждую пару child_div_1и child_div_2рядом друг с другом. Как я могу это сделать?

css layout html

— Джастин Мельцер
источник

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

Проверьте рабочий пример на http://jsfiddle.net/c6242/1/

— Хусейн
источник

1

Он хочет, чтобы div детей выровнялся рядом друг с другом, а не родители (по крайней мере, я так понимаю ...)

— ehdv

4

Я все еще думаю, display: table-cellчто получу результаты, более близкие к тому, что он имеет в виду (с тех пор они будут иметь одинаковый рост и т.д.), но этот способ, безусловно, сработает.

— ehdv

@ehdv display: table-cellне поддерживается в IE6 IE7. плыть налево; - правильный способ сделать это.

— Hussein

На самом деле правильный способ сделать это в IE6,7 - с <tr><td>, потому что любой другой вариант будет отключен , когда пользователь изменит размер окна. В современных браузерах display: inline-blockэто обычно лучший вариант.

— Джон Хенкель

126

Поскольку div по умолчанию являются blockэлементами, то есть они будут занимать всю доступную ширину, попробуйте использовать -

display:inline-block;

divТеперь оказываются инлайн т.е. не нарушает поток элементов, но по- прежнему будет рассматриваться в качестве элемента блока.

Я считаю эту технику проще, чем борьбу с floats.

Дополнительную информацию см. В этом руководстве - http://learnlayout.com/inline-block.html . Я бы порекомендовал даже предыдущие статьи, ведущие к этой. (Нет, я не писал)

— Робин Мабен
источник

Мне очень понравилось это решение. Моя единственная проблема заключается в том, что выравнивается нижняя часть обоих div вместо выравнивания верха. Есть ли для этого быстрая настройка?

— Крис

Я бы предложил использовать 2 обертки divодинаковой высоты, чтобы содержимое внутри них казалось бы выровненным по верхнему краю.

— Робин Мабен,

2

Я согласен. Это намного лучше, чем то, float:leftчто дает вам гораздо больше возможностей без переопределения всего макета. Так все «просто работает». Проверьте это здесь: jsfiddle.net/SrAQd/4

— Джерри

12

Чтобы получить вертикальное выравнивание, я бы добавил "vertical-align: top;"

— cdiggins 06

@Chris: Да, я согласен с cdiggins. Это должно вам помочь.

— Робин Мабен

44

Я нашел приведенный ниже код очень полезным, он может помочь любому, кто ищет здесь

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

Развернуть фрагмент

— топоры
источник

11

Использовать flexbox очень просто!

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

Пример скрипки

— Sol
источник

6

Используя стиль

.child_div_1 {
    float:left
}

— amit_g
источник

5

Лучшее, что мне подходит:

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

 .right{
   margin-left:140px;
 }

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

— Jiantongc
источник

2

float:leftСвойство пользователя в дочернем классе div

подробно проверьте структуру div: http://www.dzone.com/links/r/div_table.html

— Праная Рана
источник

2

Использование flexbox

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

— dasfdsa
источник