Как получить эти два div рядом? - PullRequest
Новая
       18

Как получить эти два div рядом?

86 голосов
/ 22 марта 2011

У меня есть два 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 стояла рядом друг с другом. Как я могу это сделать?

Ответы [ 8 ]

106 голосов
/ 22 марта 2011

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

display:inline-block;

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

Я считаю эту технику легче, чем бороться с float с.

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

67 голосов
/ 22 марта 2011 
#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/

36 голосов
/ 11 июля 2012

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

<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>
5 голосов
/ 02 июня 2018

Используя flexbox, это супер просто! 

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

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

4 голосов
/ 05 августа 2013

Лучшее, что работает для меня: 

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

 .right{
   margin-left:140px;
 }

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

3 голосов
/ 22 марта 2011

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

.child_div_1 {
    float:left
}
1 голос
/ 02 июня 2018

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

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
1 голос
/ 22 марта 2011

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

проверьте структуру div в деталях: http://www.dzone.com/links/r/div_table.html

...