Question

我要将100个宽度的容器中的4个div放在一起。

我看到了this question，这很有用。

但我的问题是，在使用该解决方案时，div彼此保持一致，但我需要一点保证金/空间。

例如支持这样的子div：

<div class="introwrapper" 
     style="width:25%;height:100%; float:left; margin-left:5px;">
</div>

实际上，我想让这4个div并排放置，并在它们之间留出5个像素的空间，剩余的剩余空间，使它们的宽度相等，并使得所有这些宽度的总和4个div和所有3个5px边距100％。

如何进行这种对齐？

Answer 1

我很抱歉这个混乱。我虽然可以使用一种技术，但我经常使用它来对象居中，但事实并非如此。

不幸的是，我现在唯一能想到的是另外一层容器/包装器。

Essentialy：

容器width: 100%
- 内部容器：width: 25%;
  - 您的对象div padding-right: 5px;没有宽度。它将通过display: block属性自动设置，默认情况下为div。

Answer 2

以下是解决方案：

（请注意，sx.png是一个10x10像素的透明占位符）。

<div style="height: 160px; width: 100%; box-sizing:border-box; display:table;">
                <div class="introwrapper" style="height:100%; width:25%;display:table-cell;">a</div>
                <img src="../_imgs/sx.png" />
                <div class="introwrapper" style="height:100%; width:25%;display:table-cell;">b</div>
                <img src="../_imgs/sx.png" />
                <div class="introwrapper" style="height:100%; width:25%;display:table-cell;">c</div>
                <img src="../_imgs/sx.png" />
                <div class="introwrapper" style="height:100%; width:25%;display:table-cell;">d</div>                
            </div>

div（并排）的内联对齐，中间有一点空间

2 个答案: