Question

我有三个不同宽度的table-cell div：30%，40%和30%。

我的外部div是100%，但是我的内部div不会显示它们应该是的。如果我使用px它可以正常工作（例如：外部div：300px，内部：100px每个。）

那么我怎样才能让它与宽度一起工作呢？ 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>

Answer 1

如果您要求它们覆盖整个宽度，请将display的{{1}}属性设置为#container。

table

<强> Demo

如果您不要求它们覆盖整个宽度，但#container { width:100%; background:#ccc; display:table; }与内部div一样大，则将其设置为container

table-row

<强> Demo

表格单元格，宽度为％

1 个答案: