试图找出列宽不同的原因,以及如何使它们等宽。
.col-container {
display: table;
width: 100%;
margin: 0 auto;
}
.col {
display: table-cell;
}
<div class="col-container">
<div class="col col1">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col col2">
<h2>Column 2</h2>
<p>Hello World!</p>
</div>
<div class="col col3">
<h2>Column 3</h2>
<p>Some other text..</p>
</div>
</div>
最佳答案
您可以使用 table-layout:fixed;
属性,它应该均匀地喷洒列(问题关键字: 等于宽度)。
您还可以添加一个 width
来保护它。 border-spacing
如果您也使用它,则应包含在 width
计算中。
https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.
.col-container {
display: table;
width: 100%;
margin: 0 auto;
table-layout: fixed;
}
.col {
display: table-cell;
border: solid;
}
.w {
margin-top: 1em;
border-spacing: 2px;
}
/* add width and border-spacing */
.w.col {
width: 33.33%;
box-sizing: border-box;
}
<div class="col-container">
<div class="col col1">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col col2">
<h2>Column 2</h2>
<p>Hello World!</p>
</div>
<div class="col col3">
<h2>Column 3</h2>
<p>Some other text.. Some other text.. Some other text.. Some other text..</p>
</div>
</div>
<div class="col-container w">
<div class="col col1">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col col2">
<h2>Column 2</h2>
<p>Hello World!</p>
</div>
<div class="col col3">
<h2>Column 3</h2>
<p>Some other text.. Some other text.. Some other text.. v Some other text..</p>
</div>
</div>
关于html - 显示宽度为 : table. 的等高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47143751/