比方说,我有不同的宽度例如列数:按比例增加列宽
| 100 | 200 | 55 | 450 | empty space
现在我需要调整每一列的宽度,整个排在其容器适合的方式,并采取100%。
我当然可以设置.row { max-width: 100% }
并将最宽的列设置为100%,但是我想使它成为每列按比例可用空间的方式。有任何想法吗?
比方说,我有不同的宽度例如列数:按比例增加列宽
| 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(盒大小:边界盒),否则填充和边框将溢出宽度。 :)
'显示:table','显示:表cell'等 – melancia 2014-09-22 20:28:57
@Mel什么?那很容易?真棒! – Agzam 2014-09-22 20:30:16
你的意思是说与他们的价值成正比吗? – Sunand 2014-09-22 20:31:10