Question

我有以下代码。 div_2是否可以动态扩展父div而父div不具有宽度？

<div>
    <div id="div_1"></div>
    <div id="div_2"></div>
    <div id="div_3"></div>
</div>

#div_1, #div_2, #div_3{
float:left;
}
#div_1{
width:300px;
}
#div_3{
width:350px;
}

Answer 1

我不确定我明白你的意思，但这可能是你想要的吗？

    #div_1, #div_2, #div_3{
float:left; height: 400px;
}
#div_1{
    width:100px;
    background: red;
}
#div_3{
    width:150px;
    background: blue;
}
#parent{
    border: 4px solid #000;
    float:left;
}

http://fiddle.jshell.net/ndqkg2hq/

Answer 2

是。这是可能的。因为你给孩子div一些浮动，所以你需要向父div提供溢出。它可能是溢出隐藏的。它应该工作。如果仍然存在宽度问题，请将auto添加到父div的宽度。

.parentdiv{overflow:hidden;width:auto;}

Answer 3

是的，您可以尝试使用以下css作为父div，也可以将.clearfix类添加到父div

body > div{overflow:hidden;width:auto;}

OR

<div class="clearfix">
<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>
</div>

css for .clearfix class

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

html固定宽度和动态布局

3 个答案: