底部多个div位置浮动

Question

我想将.span4（图片）和.span8（绿框）设置为.row（灰色框）的底部

.row应自动调整大小，因为.span8具有随机高度。

我想要的是这个结果：

我得到的是：

示例1

此处.span8不在.row的底部，但.row具有自动高度

http://jsfiddle.net/39znd/

示例2

此处.span8位于.row底部，但.span8不在.row内，您可以在第2和第3个帖子中看到

http://jsfiddle.net/HZu82/

示例2 我添加到.span8 blockquote - ＆gt;的位置：绝对的;

有人有提示吗？

Answer 1

您可以在包装上使用display:table; display:table-cell;，vertical-align:bottom;  对于您的问题，请参阅此演示：

<强> FIDDLE

HTML：

<div id="container">
    <div class="table">
        <div class="row clearfix">
            <div class="span4">
                <img src="http://lorempixel.com/290/270/people/9/" />
            </div>
            <div class="span8_wrap">
                <div class="span8">
                    <blockquote class="bubble1-left">
                        <p>This is a blockquote</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

#container{
width:900px; /* TOTAL WIDTH */
margin:0 auto;
padding:0 40px;
position:relative
}
.table{
    display:table;
}
.row{
display:table-row;
margin:0 0 20px 0;
min-height:270px;
background:grey;
}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}

.span4{
    display:table-cell;
    vertical-align:bottom;
    width:300px; /* IMG BOX */
    background:grey;
}
.span4 img{
    display:block;
}

.span8_wrap{
     display:table-cell;
    vertical-align:bottom;
}
.span8{
padding-bottom:30px;
width:600px; /* TEXT BOX */
background:green;
}
blockquote{margin:0 0 30px 0}
blockquote p{margin:0;font-size:1.25em}
.bubble1-left{
    position:relative;
    padding:20px;
    border:3px solid #000;
    text-align:center;
    color:#000;
    background:#fff;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}

Answer 2

要在绿色div上方留出空格，请尝试下一步：

• 将一些div插入此空白区域，让绿色div的高度为100px，div高度超过100％。
• 使用绿色div的下一个样式：position: absolute; left: 0px; bottom: 0px; right: 0px;