Question

这就是我想要做的事情：

HTML

<div class="container">
    <div id="one" class="child">One</div>
    <div id="two" class="child">Two</div>
    <div id="three" class="child">Three</div>
    <div id="four" class="child">Four</div>
</div>

CSS

<style type="text/css">
     .container{
        height:40px;
        width:500px;
     }
     .class{
        float:left;
        /*...*/
     }
</style>

子div应该填充容器div它的宽度有多大或多小。他们可以根据容器自动变大。

|<---One----><---Two---><-Three-><--Four-->|

我怎样才能用css做到？

提前致谢。

Answer 1

您可以将.child宽度设置为25%，如下所示：

.child { width 25%; }

You can test it out/play with it here

Answer 2

我已经设置了一个测试网站，以确保其有效：

首先，你需要保持浮动到“左”以保持所有内容在同一行。接下来，将宽度设置为“25％”，以分隔元素。最后，将text-align设置为“center”以使元素居中，如图所示。请记住，如果更改元素数量，则需要将“25％”修改为均匀分隔元素的值。（使用100 / numElements）。

.child {
  float: left;
  width: 25%;
  text-align: center;
}

有没有人知道如何在不使用宽度百分比的情况下执行此操作，以便在删除或添加元素时自动传播元素？

Answer 3

总宽度为500，因此每个子div应为125px宽。你有正确的想法使用浮动：左;

Answer 4

给你的解决方案是正确的。如果内部div中有边距/边框/填充，请小心，因为在这种情况下，25％会破坏布局（边距，边框和填充不包括在百分比中）。

将div装入固定空间

4 个答案: