Затронутые одноуровневые поля HTML

Я пытаюсь установить поле для нескольких элементов div внутри контейнера div. Вот HTML:

<div id="container">
    <div id="square"></div>
    <div id="square1"></div>
    <div id="square2"></div>
</div>

Вот CSS:

#container {
    background: #ccc;
    width: 200px;
    height: 500px;
    position: absolute;
    overflow: initial;
}

#square {
    margin-top: 10px;
    height: 50px;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    background: black;
}

Теперь предположим, что я хочу отредактировать поле квадрата 1. Вот обновленный CSS:

#container {
    background: #ccc;
    width: 200px;
    height: 500px;
    position: absolute;
    overflow: initial;
}

#square {
    margin-top: 10px;
    height: 50px;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    background: black;
}

#square1 {
    margin-top: 55px;
    height: 50px;
    background: red;
}

Поля квадрата 1 правильные. Однако это искажает поля квадрата2, потому что теперь верхнее поле измеряется от квадрата1, а не от контейнера div. Как установить поля всех родственных элементов div там, где они измеряются от контейнера, независимо от того, какие другие одноуровневые элементы добавляются/удаляются? Любая помощь будет принята с благодарностью.


html css margin margins
person user3781214    schedule 29.09.2014    source источник
comment
Квадрат класса предназначен для использования где-то здесь?   -  person Duniyadnd    schedule 29.09.2014
comment
Нет, я удалю это.   -  person user3781214    schedule 29.09.2014
comment
Я думаю, вы можете использовать свойства position:absolute и top для размещения элементов div в контейнере.   -  person DaniP    schedule 29.09.2014

Ответы (2)


arrow_upward
1
arrow_downward

вам нужно будет указать position absolute и width 100%;, вы можете проверить скрипт js

Скрипка Js

так для каждого квадрата

 #square {
    margin-top: 10px;
    height: 50px;
    background: green;
    position:absolute;
    width:100%;
 }
person Vitorino fernandes    schedule 29.09.2014

arrow_upward
0
arrow_downward

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

Таким образом, ваш HTML остается прежним. Причина, по которой вы помещаете absolute в относительный, заключается в том, что абсолютное значение воспроизводится в поле #container вместо тела.

Однако ваш CSS меняется:

#container {
    background: #eee;
    width: 200px;
    height: 500px;
    position: relative;
    border: 10px solid green;
}

#square {
    margin-top: 10px;
    position: absolute;
    height: 50px;
    left: 0;
    right: 0;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    position: absolute;
    background: black;
    left: 0;
    right: 0;
}

#square1 {
    margin-top: 55px;
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}
person Duniyadnd    schedule 29.09.2014