按比例增加列寬

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（盒大小：邊界盒），否則填充和邊框將溢出寬度。 :)