我正在寻找三个 div 并将它们水平堆叠(彼此相邻)在包含 div 中。这个包含的 div 具有可变宽度,因此当浏览器按比例缩小时(这是针对响应式设计),三个子 div 会按比例缩放。此外,三个子 div 必须单独定位,以便最左边的 div 在左侧,中间的 div 居中,最右边的 div 一直到包含 div 的右侧。
我试图通过将容器 div 设置为 display: table 并将三个子 div 设置为 display: table-cell 来实现这一点——这很好用,除了我无法将三个子 div 定位在我上面描述的。我在父 div 上尝试了边框间距;但是,这不符合我的目标。
这是我的小提琴代码:http: //jsfiddle.net/mkerny45/97mt7/7/
所需结果的屏幕截图:http: //d.pr/i/KUfd (在这里您将看到三个子 div:left、middle、right 在包含 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>