2 столбца Div плавают справа и слева дочерние элементы div вне родителя

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

<head> 
    <link rel="stylesheet" type="text/css" href="float.css" />
</head>    

<body class="wrapper">
    <div class= "whole">
        <div class="left">
            <p> Hello </p>
        </div>
        <div class="right">
            <p> Hello Again</p>
        </div>
    </div>
</body>

CSS это

.whole {
    padding: 30px 30px 15px 30px;
    background-color: yellow;
    margin-bottom: 30px;
}
.left {
    width:50%;
    position:relative;
    float: left;
    background-color:green;
}
.right {
    width:50%;
    position:relative;
    float: right;
    background-color:red;
}

Почему содержимое дочерних разделов «справа, слева» должно быть ниже родительского блока «целиком» ??


html css css-float
person Peter    schedule 31.08.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Попробуйте добавить эти свойства к родителю, например whole:

position:relative;
overflow:auto;

И этот css для дочерних div:

position:absolute:
top: xxx;
left: xxx;

Обратите внимание, что вы должны использовать id вместо класса для элемента, который должен быть только один в документе.

person Sarfraz    schedule 31.08.2010
comment
переполнение: авто; работал отлично. Мне не нужно было менять дочерние элементы div или положение родителя. - person Peter; 01.09.2010
comment
Я предпочитаю overflow:hidden, так как overflow:auto может отображать полосы прокрутки в div, если содержимое больше его. - person Guillermo Gutiérrez; 03.10.2012

arrow_upward
1
arrow_downward

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

person m.edmondson    schedule 31.08.2010

arrow_upward
1
arrow_downward

Эту проблему часто называют очисткой поплавков. На этой странице есть несколько решений http://www.positioniseverything.net/easyclearing.html, а также со ссылкой на новую информацию. «Когда поплавок содержится в контейнере с видимой рамкой или фоном, этот поплавок не опускает автоматически нижний край контейнера, поскольку поплавок становится выше. Вместо этого поплавок игнорируется контейнером и будет свисать из дно контейнера как флаг».

person joelt    schedule 31.08.2010

arrow_upward
0
arrow_downward

Очистка с переполнением:авто; или использования трюка clearfix:after в родительском div должно быть достаточно. Я бы не стал давать абсолютное позиционирование дочерним элементам, так как это остановит любые элементы под оболочкой, естественным образом перетекающие со страницей.

person staticvoid    schedule 31.08.2010