Question

我正在尝试格式化网格的列，使其两侧和其他网格具有相同的高度，以便在下方正确排列。在这个例子中，半列有更多信息（高度不同）。我希望另一半拥有相同的高度。这可以实现吗？

谢谢，代码如下：

 <style>
 #page {
    width:95%;
    text-align:center;
    margin:auto;
}
#row {
    height:100%
}
#header {
    width:100%;
    background-color: rgb(0, 143, 213);
    height:50px;
}
#full {
    width:99%;
    margin:0.5%;
    background-color:blue;
}
#half {
    width:48%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:yellow;
    height: 50%;
}
#third {
    width:32.333%;
    float:left;
    margin:0.5%;
    background-color:blue;
}
#quarter {
    width:23%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:blue;
    height:200px
}
</style>

<div id="page">
<div id="full">FULL</div>
<div id="half">
    <h1>Half</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div id="half">
    <h1>Half</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="row">
    <div id="half">Half
        <br>test</div>
    <div id="quarter">Quarter</div>
    <div id="quarter">Quarter</div>
</div>

Answer 1

我不确定这会如何影响您的预期样式整体，但是为您的#half div而不是百分比指定固定像素高度会强制它们达到相同的高度。

#half {
    width:48%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:yellow;
    height: 300px;
}

的更新 的

我挖得更深一点，发现了

“百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算'自动'。根元素的百分比高度为相对于初始包含块。“Source

所以基本上，你有两个选择。

1）正如我最初建议的那样，指定一个固定的像素高度而不是百分比 2）为#page div分配固定的像素高度。您的#half div现在可以使用百分比，这将根据#page div进行测量。例如：

#page { width:95%; text-align:center; margin:auto; height:1000px } #half { width:48%; margin:0.5%; padding:0.5%; float:left; background-color:yellow; height: 50%; }

将导致您的#half div被 ~~~500px（不包括margin和padding）~~ 505px。额外的5个像素是0.5％padding，也是从#page高度计算出来的。

格式化网格中的div高度

1 个答案: