Question

我知道必须有一个简单的方法来做到这一点，但对于我的生活我无法理解。

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

页面使用faux absolute positioning demo的精简版本作为框架，实现它没有问题 - 但我需要的是在中心div（列）中排列这三个对象的自包含方式）。

我已经尝试将它们放在Unorded List中但是当我将元素浮动到左边时 - 那么它们会浮动到左边并且不再居中在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并结合浮点数或绝对定位。

我不想建议表格，但如果你真的很绝望并且无法获得另一种方法，那也是一种选择。查看模拟表行为的CSS display属性。

如何在页面上水平分发三个项目？

1 个答案: