2列Div浮动，左右子Div在父元素外部

Question

2列Div浮动，左右子Div在父元素外部

4

我找不到一个好的解决方案来解决这个问题。在父级div内有2个子div。当我试图将这些子div向左和向右浮动，以便在父级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 is

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

为什么子div中的内容（“right, left”）会在父div（“whole”）下方？

- Peter

4个回答

1

这很简单。Float使元素“浮动”出正常页面内容，这就是为什么它已经在您的容器div下面了。不要使用div作为子元素，而是尝试使用span，它们几乎是相同的东西，但可以愉快地并排坐在一起。

- m.edmondson

1

这个问题通常被称为清除浮动。此页面提供了一些解决方案http://www.positioniseverything.net/easyclearing.html以及一个链接到更新信息的页面。"当一个浮动元素包含在一个具有可见边框或背景的容器盒子中时，该浮动元素不会自动强制容器的底部边缘向下移动，因为浮动元素变高了。相反，容器会忽略该浮动元素，并像旗帜一样悬挂在容器底部之外。"

- joelt

0

使用overflow:auto;清除或在父级div上使用clearfix:after技巧应该足够了。我不会给子元素绝对定位，因为这会阻止包装器下面的任何元素自然地随页面流动。

- staticvoid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sarfraz · Accepted Answer

尝试将以下属性添加到父元素whole中：

position:relative;
overflow:auto;

同时将此 CSS 应用于子 div：

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

请注意，在文档中只会有一个元素时，应该使用 id 而不是 class。