Question

我有一个主内容div，我在其中以行式布局（不使用表格）动态添加内容块。我试图在内容块本身以及边缘内容块和主内容div的边界之间保持间距对称。

这是我想要实现的布局：

 ______________________________________
|                                      |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|                                      |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|                                      |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|  |XXXXX|  |XXXXX|  |XXXXX|  |XXXXX|  |  
|______________________________________|

大容器div是我的内容div。

小| XXXXXX |块是我内在的内容块div。

这是我遇到的问题：当我使用margin-left或margin-right来正确分隔内部div时，它会抛出边缘块的间距和更大的内容div - 所以我最终得到最右边或最左边的额外空间会使页面看起来很难看。我已经设置了内部块的宽度，允许每个“行”4个，这是我想要保留的布局。内部块的总数由我的数据库中的数据动态确定，范围从1到30.

这是我的代码：

div.content {
    float: left;
    width: 96%;
    padding: 2%;
}    

div.inner_block {
    float: left;
    width: 22%;
    height: 150px;
    margin: 0 3% 2% 0;  
}

如果可能的话，我想在内容div上保留“padding：2％”，因为这样可以保持加载到此内容div中的许多其他页面的一致性。

你怎么看？解决办法是什么？

谢谢！

Answer 1

将div.inner_block改为margin: 1% 1% 2% 2%;似乎可以很好地平衡一切。

See example →

Answer 2

您只有width:96%;才能使用。因此，您的计算余量22%+3%在这里是错误的，因为当您有4个内容块时，它将达到100％。但是，您只能使用容器宽度的96%。

所以为了简单起见 - 你的4个容器应该使96％不是总宽度的100％，因为你有填充物。

请记住margin+padding+width = total outer width。

如何用CSS流体间距保持动态内容的对称性

2 个答案: