Question

让我说我有不同宽度的列数，例如：

|    100   |     200     |  55  |          450          |    empty space

现在我需要调整每列的宽度，使整个行适合其容器，并且需要100％。

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

Answer 1

您可以同时使用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>

Demo

Answer 2

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

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（box-sizing：border-box;）中正确设置了框大小，否则填充和边框将溢出宽度。：）

按比例增加列宽

2 个答案: