jquery - 响应式网页设计 float 元素距离

Question

我有许多具有固定长度和宽度的 div (cell_container)。它们位于占 body 宽度 90% 的 wrapper 内。如果您调整浏览器的大小，某些元素会转到下一行。这没关系。但是右边还有一些空闲空间。如何使边距自动或动态地改变 cell_container 之间的距离，从而使元素彼此和边缘之间的距离相同。

<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 一个以 % 为单位的宽度。但这取决于您。