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

Question

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

0

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

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

Здесь ссылка jsFiddle.

Благодарю!

Ben Elliott 04 окт. 2013, в 03:08

Источник

2

div - это блочные элементы, поэтому они текут естественным образом сверху вниз - зачем вам менять их расположение по умолчанию? красный и зеленый начинаются с 0,0, так что вы ожидаете? удалите все, кроме стиля цвета и, возможно, высоты и ширины и посмотрите, что произойдет
jenson-button-event 04 окт. 2013, в 00:36
0

Я обновил ваш jsfiddle с возможным решением ( jsfiddle.net/denisonluz/kFaVe/1 )
Denison Luz 04 окт. 2013, в 00:51
0

@jenson-button-event Дженсон-Баттон-ивент, ты совершенно прав. Это научит меня поздно кодировать, усложнять проблему и пытаться абстрагировать ее. Спасибо :)
Ben Elliott 04 окт. 2013, в 00:52

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

div - это блочные элементы, поэтому они текут естественным образом сверху вниз - зачем вам менять их расположение по умолчанию? красный и зеленый начинаются с 0,0, так что вы ожидаете? удалите все, кроме стиля цвета и, возможно, высоты и ширины и посмотрите, что произойдет
Я обновил ваш jsfiddle с возможным решением ( jsfiddle.net/denisonluz/kFaVe/1 )
@jenson-button-event Дженсон-Баттон-ивент, ты совершенно прав. Это научит меня поздно кодировать, усложнять проблему и пытаться абстрагировать ее. Спасибо :)

ross · Answer 1 · 2013-10-03T22-13-00.000Z

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

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

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

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

Scary Wombat · Answer 2 · 2013-10-03T21-51-00.000Z

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