1

我有这个 链接到我的 jsfiddle 代码

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

谢谢，代码如下：

 <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>

4

1 回答 1

1

我不确定这将如何影响您的整体预期样式，但是为您的#halfdiv 分配一个固定的像素高度而不是一个百分比将迫使它们具有相同的高度。

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

更新

我挖得更深了，发现

"百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。根元素上的百分比高度是相对于初始包含块的。” 来源

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

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

#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%;
}

将导致您的#halfdiv 为~500px（不包括margin和padding） 505px。额外的 5 个像素是 0.5% padding，也是从#page高度计算的。

于 2013-05-09T22:51:26.983 回答