Question

我正在寻找三个div并将它们水平堆叠（紧挨着彼此）在一个包含div中。这个包含div的流体宽度使得当浏览器缩放时（这是为了响应式设计），三个子节点按比例缩放。此外，三个子div必须单独定位，以便最左边的div在左边，中间div居中，最右边的div一直到包含div的右边。

我试图通过将容器div设置为display：table和要显示的三个子div来实现这一目的：table-cell - 这很好用，除了我不能让三个子div定位在我上面描述的方式。我在父div上尝试了边距;但是，这对我的目标不起作用。

这是我的小提琴代码：http://jsfiddle.net/mkerny45/97mt7/7/

所需结果的屏幕截图：http://d.pr/i/KUfd （这里你将看到三个子div：左，中，右包含div。左和右div分别一直到左/右侧，中心div在包含div的中心。边距也是在照片中描述。我希望整个包含div和子div按比例缩小，并让子div始终保持在适当的位置。）

代码

<div class="articles">
  <article>
    <img src="http://placehold.it/380x214/000000&text=Left" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/3D6AA2&text=Middle" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/98BD56&text=Right" />
  </article>
</div>

Answer 1

你可以使用text-align：justify来实现这一点，使div均匀分开，使它们与边缘齐平。然后添加宽度为100％的span类以强制包装器的宽度。

DEMO - ＆gt; http://jsfiddle.net/spUKQ/2/

<强> HTML

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="stretch"></span>
</div>

<强> CSS

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/* just for demo */
.box1, .box3 {
    background: #ccc
}
.box2 {
    background: #0ff
}

如何在父div中水平堆叠三个div与流体比例并单独定位每个子div？

1 个答案: