1

我有许多具有固定长度和宽度的 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;
}
4

2 回答 2

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

于 2013-11-06T07:43:18.627 回答
1

我知道您已经选择了答案，但我认为更优雅的方法是使用text-align:center. text-align:center由于 inline-block 元素的行为类似于文本，因此您可以通过简单地添加包装器来使您的 div 元素始终居中，无论您有多少（即使是奇数） 。

在此处查看演示

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

}
于 2013-11-06T09:00:45.127 回答