[英]Table-cell with width in %
I've got three different table-cell
divs which have different widths: 30%
, 40%
and 30%
. 我有三个不同的table-cell
div,它们的宽度不同: 30%
, 40%
和30%
。
My outer div is 100%
, but my inner divs doesn't displayed as they should be. 我的外部div是100%
,但是我的内部div却没有显示出来。 If I am using px
it works fine (Example: outer div: 300px
, inner: 100px
each). 如果我使用的是px
那么效果很好(示例:外部div: 300px
;内部: 100px
)。
So how can I make it work with width also? 那么如何使它也与宽度一起使用呢? Here is my code 这是我的代码
#container { width:100%; background:#ccc; }
#left { background:red; width:30%; display:table-cell; }
#center { background:green; width:40%; display:table-cell; }
#right { background:red; width:30%; display:table-cell; }
<div id="container">
<div id="left">asdasdas </div>
<div id="center">as das da <p> asdas </p> </div>
<div id="left"> asd as das</div>
</div>
If you require them to cover full width then set the display
property of #container
to table
. 如果您要求它们覆盖整个宽度,则将#container
的display
属性设置为table
。
#container { width:100%; background:#ccc; display:table; }
If you do not require them to cover full width but the container
to be as big as the inner divs then set it to table-row
如果您不要求它们覆盖整个宽度,但是container
要与内部div一样大,则将其设置为table-row
#container { width:100%; background:#ccc; display:table-row; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.