У меня есть два 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
рядом друг с другом. Как я могу это сделать?
display: table-cell
что получу результаты, более близкие к тому, что он имеет в виду (с тех пор они будут иметь одинаковый рост и т.д.), но этот способ, безусловно, сработает.display: table-cell
не поддерживается в IE6 IE7. плыть налево; - правильный способ сделать это.<tr><td>
, потому что любой другой вариант будет отключен , когда пользователь изменит размер окна. В современных браузерахdisplay: inline-block
это обычно лучший вариант.Поскольку div по умолчанию являются
block
элементами, то есть они будут занимать всю доступную ширину, попробуйте использовать -div
Теперь оказываются инлайн т.е. не нарушает поток элементов, но по- прежнему будет рассматриваться в качестве элемента блока.Я считаю эту технику проще, чем борьбу с
float
s.Дополнительную информацию см. В этом руководстве - http://learnlayout.com/inline-block.html . Я бы порекомендовал даже предыдущие статьи, ведущие к этой. (Нет, я не писал)
источник
div
одинаковой высоты, чтобы содержимое внутри них казалось бы выровненным по верхнему краю.float:left
что дает вам гораздо больше возможностей без переопределения всего макета. Так все «просто работает». Проверьте это здесь: jsfiddle.net/SrAQd/4Я нашел приведенный ниже код очень полезным, он может помочь любому, кто ищет здесь
источник
Использовать flexbox очень просто!
Пример скрипки
источник
Используя стиль
источник
Лучшее, что мне подходит:
http://jsfiddle.net/jiantongc/7uVNN/
источник
float:left
Свойство пользователя в дочернем классе divподробно проверьте структуру div: http://www.dzone.com/links/r/div_table.html
источник
Использование flexbox
источник