我有一个已知宽度,776像素和三列的表.第三列具有已知宽度,216像素,但另外两列没有已知宽度.我想要的行为是第二列的宽度与其子元素相同.无论剩下多少宽度,776 – 216 – 2nd,都是第一列的宽度.
我找到了一个示例,它设置应该将其宽度最小化为1像素的列的宽度.这似乎有效,但似乎它是一个黑客,我不明白为什么它的工作原理.是否有更“标准”的方法来实现相同的结果？
这是我的带有内联CSS的HTML作为示例：
最佳答案
好吧,一个简单的方法是将第一个单元格设置为宽度：100％.这将迫使它尽可能多地填充父表的宽度.然后,在第三个单元格中,放置一个216px的内容元素(如div).
表格的单元格总是试图尊重其内容.所以这样,第二个div会在中间被淹没,只是尊重自己的内容.第三个将尊重其216px内容,第一个将填补其余部分.
CSS：
table {
width: 776px;
background: silver;
}
td:nth-child(1) {
width: 100%;
background: red;
}
td:nth-child(2) {
background: green;
}
td:nth-child(3) {
background: blue;
}
.dv3rd {
width: 216px;
}
然而
同样注释,您不应该使用表格进行页面布局.一个简单的替换就是使用css表,你的div可以像display：table和display：table-cell元素一样工作.
这是相同的例子,但使用div代替：
Working JsFiddleExample – Tableless
CSS：
.table {
width: 776px;
background: silver;
display: table;
}
.table > div:nth-child(1) {
display: table-cell;
width: 100%;
background: red;
}
.table > div:nth-child(2) {
display: table-cell;
background: green;
}
.table > div:nth-child(3) {
display: table-cell;
background: blue;
}
.dv3rd {
width: 216px;
}
相关文章
