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

Ответы

Ответ 1

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

Ответ 2

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

display:inline-block;

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

Я нахожу эту технику проще, чем бороться с float s.

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

Ответ 3

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

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

Ответ 4

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

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

 .right{
   margin-left:140px;
 }


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

Ответ 5

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

.child_div_1 {
    float:left
}