我有一个已知宽度,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;
}
原文地址：https://www.jb51.cc/css/427560.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
