0

我有一个这样的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;我的maindiv 上使用时，一切都坏了（你可以查看jsfiddle上的示例。只有当我在主 div 上使用绝对位置时一切正常，但我不想使用位置绝对，因为我希望主 div 在文档中保留其空间。请帮忙吗？

谢谢

4

8 回答 8

2

每当您有浮动元素时，您都需要使用clear以确保父级包装所有内容，我喜欢为此使用:afterCSS

.main:after{
    content: '';
    display: block;
    clear: both;
}
于 2013-07-10T17:52:00.500 回答
1

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

.main
{

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

小提琴

所有关于花车

于 2013-07-10T17:49:00.930 回答
0

您可以使.maindiv 必须overflow: auto采用其浮动子项的高度。

.main
{
    overflow: auto;      
    padding:5px;
    color:#fff;
    background-color:#365;
}
于 2013-07-10T17:50:11.647 回答
0

由于子级是浮动的，main您必须添加或添加另一个：overflow: hiddenmaindiv

    <div style="clear: both;float:none;"></div>
于 2013-07-10T17:50:39.807 回答
0

利用

overflow:auto

代替

position:absolute;

在 .main

jsfiddle

于 2013-07-10T17:50:55.120 回答
0

发生的事情是您的容器没有浮动，因此由于浮动的怪异，它没有完全包含浮动的内部物品。

添加：

.main{
    float: left;
}

解决问题。

于 2013-07-10T17:55:43.830 回答
0

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

对我来说，绝对定位是在我想让元素具有粘性时保存的，比如顶部导航、底部页脚或类似的东西。

就像大多数人在这里所说的那样。浮动主 div。应该有助于缓解一些头痛。

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

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

}

于 2013-07-10T17:59:43.550 回答
0

您可以使用：

.main {
  overflow: hidden;
}

- 或者 -

clearfix 方法（如果出于其他原因不想使用“溢出：隐藏”）：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。

于 2013-07-10T18:08:15.570 回答