it-swarm.com.ru

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

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

78
Justin Meltzer
#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/

63
Hussein

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

display:inline-block;

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

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

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

101
Robin Maben

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

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

36
axs

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

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

 .right{
   margin-left:140px;
 }


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

4
jiantongc

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

.child_div_1 {
    float:left
}
3
amit_g

С помощью flexbox это супер просто!

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

Fiddle пример

2
Sol

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

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

1
Pranay Rana

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

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