对齐 div 内的图像

【问题标题】：Aligning images inside divs对齐 div 内的图像
【发布时间】：2010-07-29 22:08:09
【问题描述】：

我正在尝试将三个图像放入一个 div 中，但我无法让它们正确对齐。这就是我的想法：

alt text http://img245.imageshack.us/img245/2016/divsf.jpg

但我这辈子都想不通。有人可以帮忙吗？谢谢！

【问题讨论】：

发布你想出的标记怎么样？
编辑：这是我的标记：

保持联系

我会发布我的 CSS，但它是一团糟，它没有现在什么都做不了。

标签： css html image

【解决方案1】：

http://jsfiddle.net/tMxkX/2/

【讨论】：

【解决方案2】：

CSS

div#container {
    width:400px;
    height: 400px;
    padding:50px;
    background: red;
}
div.leftbox {
    float: left;
    width:175px;
    height: 175px;
    margin-bottom: 50px;
    background: blue;
}
div.rightbox {
    float: right;
    width: 175px;
    height: 400px;
    background: yellow;
}

HTML

<div id="container">
    <div class="rightbox">
        Right Image Box
    </div>
    <div class="leftbox">
        Left Image Box Top
    </div>
    <div class="leftbox">
        Left Image Box Bottom
    </div>
</div>

【讨论】：

【解决方案3】：

如果允许更改标记，我建议将 img 1 和 2 包装在另一个 div 中 - 然后只需将 div 浮动到左侧即可。

【讨论】：

保持联系