0

我将在一个 100% 宽度的容器中并排放置 4 个 div。

我看到了这个问题，它很有用。

但我的问题是，在使用该解决方案时，div 彼此粘在一起，但我需要在它们之间留出一点边距/空间。

例如支持这样的子 div：

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

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

如何进行这种类型的对齐？

4

2 回答 2

0

我很抱歉造成混乱。虽然我经常使用一种技术来使对象居中，但它没有。

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

本质上：

  • 容器width: 100%
    • 内容器：width: 25%;
      • 你的对象 divpadding-right: 5px;没有宽度。它将通过display: blockdiv 默认具有的属性自动设置。
于 2013-09-08T21:56:37.920 回答
0

这是解决方案：

（请注意，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>
于 2013-09-09T13:51:02.590 回答