Question

我是那些面对同样问题的无畏人物，他们将父母的身高调整到所包含的元素。我做了一些研究，发现了类似的问题，但没有答案可以帮助我，所以我想我应该开一个新的。

我已经尝试了作为答案here和here给出的建议，就像将“clearfix”添加为容器div的类一样（在这种情况下，clearfix类在{{{ 3}}），添加一个变通方法 - 间隔，等等。我想，我没有浮动的元素，所以也许这是一个不同的问题。

问题仍然存在，在我的代码中的嵌套div中#content_wrapper不适应#div_1和/或div_2，而#div_2没有不要将其高度增加到包含的<ul>。

我真的希望找到一个解决方案（也许这只是我的代码中的一些错误，我无法解决）。

感谢您的关注。

Answer 1

如果您希望父元素适应它的子元素，则无法明确定义要调整的轴（宽度或高度）的值。使用width:auto或height:auto，然后使用min-width，min-height，max-width＆amp; max-height设置适配轴的最小值和最大值。

然后，您可以为子项设置值，这些值可以是显式值，也可以是min和max阈值。

从相当混乱的代码中，很容易看出，你已经做了很多正确的事情，但你不能理解position选项。尝试更好地了解relative，absolute＆amp; fixed定位。

我通过将绝对定位更改为相对并修复了您尝试在<li>上使用的样式的缺失css选择器来修复它：

/* div1 */

#div_1 { 
    position:relative; 
    width:70%; 
    top:5px; 
    left:5px; 
    border:1px solid purple; 
}


/* div 2 */

#div_2 { 
    position:relative; 
    width:25%; 
    top:5px; 
    right:5px; 
    border:1px solid purple; 
}

#div_2 ul { 
    position:relative; 
    top:0px; 
    left:0px; 
    list-style-type:none; 
}

#div_2 ul li { 
    width:100px; 
    height:30px; 
    margin:2px; 
    padding:1px; 
    border:1px solid darkgrey; 
}

我怀疑你可能不需要你尝试过的所有修复程序。此外，我发现这种格式的代码更具可读性。

Answer 2

一般来说，您希望避免使用绝对定位进行布局。

您要找的是相等高度列。等高柱的整点是你不需要知道所涉及的任何列的高度，它们都是相同的高度，无论它们的内容是什么，它们都会优雅地展开。实现此目的的最简单方法是使用表 *显示属性。

http://jsfiddle.net/UfWJh/3/

body {
    font-size:10px;
}
/* wrappers */
 #header_wrapper {
    width:95%;
    height:40px;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
#content_wrapper {
    display: table;
    width:95%;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
/* div1 */
 #div_1 {
    display: table-cell;
    width:70%;
    border:1px solid purple;
}
/* div 2 */
 #div_2 {
    display: table-cell;
    width:25%;
    border:1px solid purple;
}
#div_2 ul {
    list-style-type:none;
}
#div_2 li {
    width:100px;
    height:30px;
    margin:2px;
    padding:1px;
    border:1px solid darkgrey;
}

Answer 3

这是我的答案：

删除绝对位置（这样实现你的布局不是一个好主意......不是跨浏览器友好...）

制作内容display: table

然后在{div}上display: table-cell得到均匀的高度...

以下是示例：

http://jsfiddle.net/Riskbreaker/UfWJh/4/

如果您不想这样 或关心身高相等 ，请使用 overflow：hidden 内容包装器和 浮动：左 2个div ...

以下是示例：

http://jsfiddle.net/Riskbreaker/UfWJh/7/

使容器高度适应儿童的高度

3 个答案: