Question

我找不到解决这个问题的好方法。我在父div中有2个div。当我尝试将div左右浮动以在父div中生成2列时，子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;
}

为什么子div中的内容“右，左”低于父div“整体”？

Answer 1

尝试将这些属性添加到父级，例如whole：

position:relative;
overflow:auto;

这个css对孩子们来说：

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

请注意，您应该使用id而不是class来表示一个元素，该元素应该只是文档中的一个元素。

Answer 2

这很简单。 Float使元素“浮动”出正常的页面内容，这就是为什么它已经低于你的容器div。不要使用div作为你的子元素，而是尝试使用几乎相同的跨度，但很乐意彼此相邻。

Answer 3

此问题通常称为清除浮动。此页面包含两个解决方案http://www.positioniseverything.net/easyclearing.html以及指向新信息的链接。 “当浮子包含在具有可见边框或背景的容器盒内时，浮子不会自动强制容器的底边向下，因为浮子会变得更高。相反，浮子会被容器忽略并且会从容器底部像一面旗帜。“

Answer 4

溢出清除：自动;或使用clearfix：在父div上的技巧后应该足够了。我不会给孩子们提供绝对的定位，因为这会阻止包装器下面的任何元素随页面自然流动。

2列Div在父节点之外浮动左右子节点

4 个答案: