在div内对齐图像

Question

I'm trying to fit three images inside a div, but I'm having trouble getting them to align properly. This is what I have in mind:

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

But I can't for the life of me figure this one out. Can anyone please lend a hand? Thanks!

Answer 1

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

Answer 2

如果允许更改标记，我建议将img 1和img包装在另一个div中-这只是将div浮动到左侧的问题。

Answer 3

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>