2 Column Div 左右子 div 浮动在父级之外
我找不到解决这个问题的好办法。我的父 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“整个”？
I can't find a good solution to this problem. I have 2 divs inside a parent div. When I try and float the divs right and left to make 2 columns inside the parent div, the child divs end up underneath the parent 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;
}
Why would the content in the child divs "right, left" be below the parent div "whole" ??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试将这些属性添加到父级，例如
whole：并将此 css 添加到子 div：
请注意，对于应该只有一个的元素，您应该使用
id而不是 class在文档中。Try adding these properties to the parent eg
whole:And this css to child divs:
Note that you should use
idinstead of class for an element which is supposed to be only one in the docume'nt.这很简单。浮动使元素“浮动”出正常的页面内容，这就是它位于容器 div 下方的原因。不要使用 div 作为子元素，而是尝试使用 span，它们几乎是相同的东西，但会很高兴地彼此相邻。
This is simple. Float makes the elements "float" out of the normal page content, which is why it has gone below your container div. Instead of using divs as your child elements, try using a span which are pretty much the same thing but will happily sit next to each other.
这个问题通常被称为清除浮动。此页面有几个解决方案 http://www.positioniseverything.net/easyclearing.html带有更新信息的链接。 “当浮标包含在具有可见边框或背景的容器框中时，随着浮标变高，该浮标不会自动迫使容器的底部边缘向下。相反，浮标会被容器忽略，并会垂下到容器外。”容器底部就像一面旗帜。”
This problem is often referred to as clearing floats. This page has a couple solutions http://www.positioniseverything.net/easyclearing.html along with a link to newer information. "When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag."
溢出清除：自动；或者在父div上使用clearfix:after技巧应该就足够了。我不会为子级提供绝对定位，因为这会阻止包装器下方的任何元素随页面自然流动。
Clearing with overflow:auto; or the using the clearfix:after trick on the parent div should be sufficient. I wouldn't give absolute positioning to the children as this will stop any elements beneath the wrapper flowing naturally with the page.