Как автоматически складывать divs вертикально внутри родителя?

Question

Вот что я пытаюсь сделать ...

1. "Родитель" имеет позицию: относительный
2. "ДИВ 1-3" есть позиция: абсолютная

Однако, когда я сделайте это, я обнаружил, что мне нужно назначить определенные «верхние» значения в моем CSS. Итак, div 1 может быть сверху: 50px, div 2 будет top: 150px, а div 3 будет top: 225px;

Есть ли способ убедиться, что div продолжаются стекировать внутри родителя без назначения верхних значений и/или абсолютного позиционирования?

Answer 1

A div должен уже отображаться как блок и принимать полный «ряд». Вот некоторые HTML и CSS, чтобы дать пример, сравнить его код:

http://jsfiddle.net/mWcWV/

<div id="parent"> 

    <div class="child">Foo</div> 
    <div class="child">Bar</div> 
    <div class="child">Baz</div> 

</div> 

Answer 2

Элементы Div являются элементами блока, а это означает, что они будут принимать полную строку и что любой элемент рядом с ними пропустит строку. Вобще:

<div></div> 
<div></div> 
<div></div> 

Если это не работает, вам, вероятно, нужно поместить их в дисплей: встроенный блок;

Answer 3

Просто снимите абсолютное позиционирование. Центрируйте divs с помощью margin:auto, а затем укажите любые вертикальные поля, которые вам нравятся.

Answer 4

Вы можете дать запас внутренних делам.

Answer 5

должны быть прямыми:

HTML:

<div class="container"> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="green"></div> 
</div> 

CSS:

.container { 
    position: relative; 
    width: 500px; 
    height: 500px; 
    background-color: #ffbf00; 
} 
.red { 
    background-color: #f00; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 
.blue { 
    background-color: #0f0; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 
.green { 
    background-color: #00f; 
    width: 200px; 
    height: 150px; 
    margin: 5px auto; 
} 

Проверить это fiddle.

Answer 6

В css использования файла ...

div 
{ 
    display : block; 
} 

Который даст линию излома каждого div блока и эту функцию по умолчанию и не использовать relative - absolute техника.