按比例增加列宽

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（盒大小：边界盒），否则填充和边框将溢出宽度。 :)