Как я могу собрать эти divs вертикально?

Я знаю, что подобные вопросы были заданы раньше, но я пробовал все решения, которые я мог найти (которые включают положение: относительное по внешнему div и положению: абсолютное на внутренних div), но я не могу на жизнь я получаю красный div, чтобы выровнять его под зеленым, а не складывать поверх него.Как я могу собрать эти divs вертикально?

HTML:

<body> 
    <div id="outer_div"> 
     <div id="title_div"> 
     </div> 

     <div id="main_div"> 
     </div> 
    </div> 
</body/>

CSS:

body { 
    height: 1000px; 
    width: 1000px; 
    margin: 0; 
    padding: 0; 
} 

#outer_div { 

    position: relative; 
    height: 100%; 
    width: 100%; 
    background-color: blue; 
    display: block; 
}  

#title_div { 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 25%; 
    width: 100%; 
    background-color: green; 
    display: block; 
} 

#main_div { 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 20%; 
    width: 100%; 
    background-color: red; 
    display: block; 
}

Here's the jsFiddle link.

Спасибо!

источник

2013-10-04 Ben Elliott

divs являются элементами блока, поэтому естественным образом потоком вниз - зачем вам менять свое положение по умолчанию? красный и зеленый начинают с 0,0, так что вы ожидаете? удалите все, кроме стиля цвета, а может быть, высоты и ширины и посмотрите, что произойдет. –

Я обновил ваш jsfiddle с возможным решением (http://jsfiddle.net/denisonluz/kFaVe/1/) –

@ jenson-button-event, вы Верно. Это научит меня кодировать поздно, что усложняет проблему, а затем пытается ее абстрагировать. Спасибо :) –

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

Удалить "position: absolute;" из #main_div и #title_div
Добавить "float: left;" в #main_div и #title_div

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

источник

2013-10-04 00:39:57 ross

Вам действительно не нужно делать дополнительные поплавки. Поплавки используются, чтобы получать вещи бок о бок, что противоположно тому, что вы хотите. Но да, это ответ – russtuck91

У вас такое же абсолютное верхнее положение как для внутренних div. Есть много способов изменить это, в том числе позволяет естественное упорядочение divs, изменение верхней позиции и т. Д.

источник

2013-10-04 00:40:54

Как я могу собрать эти divs вертикально?

ответ

Смежные вопросы