按比例增加列宽

Proportionately increasing columns width

本文关键字：增加 按比例      更新时间：2023-09-26

假设我有许多不同宽度的列，例如：

|    100   |     200     |  55  |          450          |    empty space

现在，我需要调整每一列的宽度，使整行适应其容器，并达到100%。

当然，我可以设置.row { max-width: 100% }并将最宽的列设置为100%，但我希望这样做，使每列都按比例占用可用空间。有什么想法吗？

您可以同时使用display: table和display: table-cell。

例如：

* {
    box-sizing: border-box;
}
html, body {
    width: 100%;
}
div {
    width: 100%;
    min-width: 100;
    display: table;
}
div > div {
    min-width: auto;
    width: auto;
    display: table-cell;
    border-right: 1px solid #000;
    text-align: center;
}
div > div:first-of-type {
    border-left: 1px solid #000;
}
<div>
    <div>ABCDE</div>
    <div>FG</div>
    <div>HIJKLM</div>
    <div>N</div>
    <div>OPQ</div>
    <div>RSTUVWX</div>
    <div>YZ</div>
</div>

演示

您还可以在宽度定义中使用百分比。（如果你知道每个元素的比例。）

div {
  float: left;
}
#container {
  width: 100%;
}
#e1 {
  width: 30%;
}
#e2 {
  width: 50%;
}
#e3 {
  width: 20%;
}
<div id="container">
  <div id="e1">XX</div>
  <div id="e2">XX</div>
  <div id="e3">XX</div>
</div>

请确保在CSS中正确设置了方框大小（方框大小：border-box；），否则填充和边框将溢出宽度。：）

相关文章：