对齐三个图像以均匀分布在页面上

Question

我有一个围绕三个子 div 的“主”div。每个子 div 包含一个图像。我的目标是让三个图像在我的页面上均匀对齐。图像大小相同（200 像素 x 166 像素）。如果有某种方法可以在不使用十几个 div 的情况下做到这一点，那将是极好的。重申我的问题，我不希望所有三个图像都居中。我希望左边的 img 距页面左侧 30 像素；正确的 img 距离页面右侧 30 像素，我希望中心 img 完全位于两者之间。

HTML：

    <div id="aboutimages">
        <div id="aboutimgleft">
            <img src="Stylesheets/images/manpc.jpg" alt="" />
        </div>
        <div id="aboutimgcenter">
            <img src="Stylesheets/images/coffee.jpg" alt="" />
        </div>
        <div id="aboutimgright">
            <img src="Stylesheets/images/keyboard.jpg" alt="" />
        </div>
    </div>

CSS：

#aboutimages{
text-align: center;
    width: 100%;
    margin: 0 auto;
    float:left;
    }

#aboutimgleft img{
    float:left;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:0px;
    width:250px;
} 

#aboutimgcenter {
    margin: 0 auto; 
    width: 70%;
}

#aboutimgcenter img{
    text-align:center;
    width:250px;
    height:166px;
    padding-bottom:20px;
    padding-top:20px;
}

#aboutimgright img{
    float:right;
    padding-bottom:20px;
    padding-top:20px;
    padding-right:0px;
    width:250px;
    height:166px;
} 

我迫切需要任何类型的帮助 - 这让我非常沮丧。

谢谢，

埃文

Answer 1

有几种方法可以解决这个问题，这里有一种方法：

#aboutimages {
    position:relative; /* constrain absolutely positioned child elements */
}

#aboutimgleft {
    float:left; /* Float the first element */
    margin-left:30px; /* Here's that 30px you wanted */
} 

#aboutimgcenter {
    margin: 0 auto; /* Center the second element */
}
#aboutimgright {
    /* easier than float:right, but that could work too with some tweaking */
    position:absolute;
    top:0;
    right:30px; /* Here's that other 30px you wanted */
}

只要图像在这些 div 中，它们就会对齐。

演示：http://jsfiddle.net/KPJP4/

Answer 2

应该这样做：

<style type="text/css">
#aboutimgleft, #aboutimgcenter, #aboutimgright {
    float: left; 
    width: 33.33%;
}

#aboutimgleft img {
    margin-left: 30px;
}

#aboutimgcenter {
    text-align: center;
}

#aboutimgright {
    text-align: right;
}

#aboutimgright img {
    margin-right: 30px;
}
</style>

Answer 3

实现此功能的一种方法是将外包装设置为特定宽度并将其设置为 text-align: center;，然后将内部的所有 div 设置为 display: inline-block; 并分别浮动。我在这里用你的代码设置了一个测试页面（稍微简化了一点）：http://jsbin.com/uworex 所以你可以看到它现在是如何为我工作的。