Question

我有一些具有固定长度和宽度的div（cell_container）。它们位于一个占据90％体宽的包装纸内。如果您调整浏览器大小，则某些元素将转到下一行。这没关系。但右边有一些自由空间。如何使边距自动或动态地改变cell_containers之间的距离，从而使元素彼此之间的距离和边缘相同。

<div id="wrapper">
    <div class="cell_container">
        A   </div>
    <div class="cell_container">
        B   </div>
    <div class="cell_container">
        C   </div>
    <div class="cell_container">
        D   </div>
    <div class="cell_container">
        E   </div>
    <div class="cell_container">
        F   </div>
    <div class="cell_container">
        G   </div>
.....

CSS：

.cell_container
{
    width:150px;
    height:220px;
    background-color:#FFFFFF;
    display:inline-block;
    margin:5px;
    border:1px solid;
    border-color:#999999;
    cursor:pointer;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    overflow:hidden;
}

Answer 1

一种解决方案是使用text-align:justify技巧。

#wrapper {
    text-align:justify;
    width:90%;
}
#wrapper::after {
    display:inline-block; width:100%; height:0; content:'';
}

这会将包装器div中的所有行对齐到两侧，包括最后一行。

http://jsfiddle.net/MrLister/v3T2s/1/

当然，当所有线条具有相同数量的元素时，它看起来很好;在这种情况下（有7个内部div），当有不止一行时，它看起来不会很好。
就像JFK所说，为了使它真正响应，你应该给内部div的宽度也是％。但这取决于你。

Answer 2

我知道你已经选择了答案，但我认为更优雅的方法是使用text-align:center。由于内联块元素的行为类似于文本，因此只需在包装器中添加text-align:center，就可以将div元素始终置于中心状态，无论您有多少（甚至是奇数）。

SEE DEMO HERE

#wrapper{
width:90%;
margin:0 auto;
text-align:center;

}

响应的网页设计浮动元素距离

2 个答案: