弹性网页设计浮动元素距离

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 元素居中。

在此处查看演示

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