我有等高列的问题,我知道技术上一直有人问这类问题(从我的研究中得到)但不幸的是我遇到了一个我不知道是什么的问题其他尝试。
我在 Chrome 和 Opera 中有等高的列,但不知何故 Firefox 不喜欢我做的方式。
我有一个简单的标记
<section id="env">
<div class="container">
<div class="content">
<p>
Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 2
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 3
</p>
</div>
</div>
</section>
#env div 显示为表格,.container div 显示为表格单元格。
#env {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 5px;
}
.container {
display: table-cell;
border 25px solid transparent;
width: 33.33333%;
}
.content {
background: red;
display: inline-block;
vertical-align: top;
height: 100%;
width: 100%;
border-radius: 3px;
}
p {
padding: 0 20px;
}
我为此创建了一个 fiddle 来关注这个问题:https://jsfiddle.net/vy3Lzu75/1/
如果您在 Chrome 或 Opera 中打开它,您应该会看到三个同样高的红色列。然而,在 Firefox 中,红色列对应于它们各自的内容,而不是实际的容器。
如果有人能指出我正确的方向,我会非常感激,因为到目前为止我尝试过的一切(将父级的高度设置为 1px,设置子级的最小高度,不同的显示值......)没有'不要在 FF 中做这个把戏。
提前致谢!
最佳答案
单元格在这里绘制列。 border-spacing 可以用来在 周围设置一些区域。
#env {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 30px 5px;
}
.container {
display: table-cell;
width: 33.33333%;
background: red;
border-radius: 3px;
vertical-align: top;
}
.content {
}
p {
padding: 0 20px;
}
<section id="env">
<div class="container">
<div class="content">
<p>
Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 2
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 3
</p>
</div>
</div>
</section>
https://jsfiddle.net/vy3Lzu75/2/
如果你想让内容填满所有可用的空间,你需要使用 flex boxes 和 margin 来分隔每个列:
#env {
display: flex;
width: 100%;
border-collapse: separate;
border-spacing: 5px;
}
.container {
display: flex;
flex-flow:column;
margin:5px 30px;
width: 33.33333%;
background: red;
}
.content {
flex:1;
background:green;
border-radius: 10px;
}
p {
padding: 0 20px;
}
<section id="env">
<div class="container">
<div class="content">
<p>
Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 2
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 3
</p>
<p>
Content 4
</p>
</div>
</div>
</section>
关于html - Firefox 中的等高列 (CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37706163/