Question

我有这样的div：

<div class="main">
    <div class="container_1">A</div>
    <div class="container_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.></div>    
</div>

我的CSS就是这样：

.main div
{
    float:left;
}

.main .container_2
{
    width:500px;
}

.main .container_1
{
    width:40px;
}

.main
{
    position:absolute;      
    padding:5px;
    color:#fff;
    background-color:#365;
}

我遇到的问题是，当我在position:absolute; div上使用main时，一切都被破坏了（您可以在jsfiddle上查看示例。一切正常只有当我在主div上使用绝对位置时，我才不想使用绝对位置，因为我希望主div在文档中预先设置它的空间。有什么帮助吗？

谢谢

Answer 1

每当你有浮动元素时你需要使用clear以确保父包装所有内容，我喜欢使用CSS :after来实现这个

.main:after{
    content: '';
    display: block;
    clear: both;
}

Answer 2

你可以浮动主div或给它display:inline-block来获取其浮动子节点的完整维度，除非你想在关闭容器div之前和之后的标记中添加<div style="clear:both;float:none;"></div>最后一个浮动元素。

.main
{

    display:inline-block;
    padding:5px;
    color:#fff;
    background-color:#365;
}

<强> Fiddle

<强> All About Floats

Answer 3

你可以让.main div overflow: auto来承担浮动孩子的身高。

.main
{
    overflow: auto;      
    padding:5px;
    color:#fff;
    background-color:#365;
}

Answer 4

当main的孩子浮动时，您必须在overflow: hidden中添加main或将另一个div添加为：

    <div style="clear: both;float:none;"></div>

Answer 5

使用

overflow:auto

而不是

position:absolute;

on .main

jsfiddle

Answer 6

发生的事情是你的容器没有漂浮，因此漂浮物的怪异并不能完全包含漂浮的内部物品。

中加入：

.main{
    float: left;
}

解决了这个问题。

Answer 7

我试图不惜一切代价避免绝对定位。如果我发现自己绝对定位某些东西只是为了让它显示“正确”的方式，我通常会寻找其他问题。

对我来说，当我想让元素变得粘稠时，保存绝对定位，比如顶部导航或底部页脚，或者沿着这些线条的东西。

像大多数人在这里说过的那样。漂浮主要的div。应该有助于缓解一些头痛问题。

我在这里清理了一些内容，并更新了：http://jsfiddle.net/s58TF/

.main_2{
padding:5px;
color:#fff;
background-color:#365;
float:left;

}

Answer 8

您可以使用：

.main {
  overflow: hidden;
}

- 或 -

clearfix方法（如果您不想因其他原因使用“overflow：hidden”）：http://css-tricks.com/snippets/css/clear-fix/

这个通常有效：

.group:after {
  content: "";
  display: table;
  clear: both;
}

只需将“group”类添加到“main”div，或将“group”替换为“main”。这是应用和工作的clearfix方法：http://jsfiddle.net/ksyFG/

要清楚，这些是两个独立的解决方案：“溢出：隐藏”或clearfix。

位置绝对div破碎

8 个答案: