html - 如何在页面上水平分布三个元素？

Question

我知道一定有一种简单的方法可以做到这一点，但对于我的生活我无法弄清楚。

我有一个带有流动中心列的三列布局，我需要做的是拍摄 3 张图像并将它们均匀分布在中心 div 上 - 这样中心图像始终位于中心列的中心(即页面的中心)，左图左对齐，右图右对齐。

该页面使用了精简版的 faux absolute positioning demo作为一个框架，实现它没有问题 - 但我需要的是一种独立的方式来将这三个对象排列在中心 div(列)内。

我曾尝试将它们放入一个无序列表中，但是当我将元素向左浮动时 - 那么它们将向左浮动并且不再位于 div 的中心。

我也尝试过在没有 ul 的情况下这样做，但到目前为止都没有成功。

如有任何帮助，我们将不胜感激。

Answer 1

假设这是您的标记:

<div class="wrapper">
    <img class="first">
    <img class="second">
    <img class="third">
</div>

有很多方法可以做到这一点，这里是使用已知图像宽度的一种方法:

img {
    width:100px;
    display:block;
}
.first {
    float:left;  
}
.second {
    float:right;
}
.third {
    margin:0 auto;
}

演示:http://jsfiddle.net/wY6AS/

这是另一种使用绝对定位和已知宽度的方式:

.wrapper {
    padding:10px;
    position:relative;
}

img {
    width:100px;
    height:100px;   
    display:block;
}
.first {
    position:absolute;
    top:10px;
    left:10px;
}
.third{
    position:absolute;
    top:10px;
    right:10px;
}
.second {
    margin:0 auto;
}

演示:http://jsfiddle.net/wY6AS/1/

我希望我可以制作更多演示并提供更好的解释，但我必须运行。已知宽度使它变得容易，但对于未知宽度仍然不是那么困难，在父元素上组合使用 display:inline-block 和 text-align:center例如，使用 float 或绝对定位。

我不想推荐表格，但如果您真的很绝望并且无法使用其他方法，那也是一种选择。查看模拟表格行为的 CSS display 属性。