Question

看看这个jsfiddl示例：我希望左列与底部对齐。不应该那么难，但我无法使它发挥作用。

<div width="100%" class="clear">
  <div class="fl" width="50%">I want this aligned to bottom</div>
    <div class="fr" width="50%">
      <div>Row 1</div>
      <div>Row 2</div>
      <div>Row 3</div>
    </div>    
</div>
<hr class="clear"/>

编辑：我在这里用我的问题更新了我的JS Fiddle与Vitorinos和Dankos解决方案。 http://jsfiddle.net/magwalls/rdrznzhe/12/

Answer 1

据我所知，您无法设置floated元素的垂直对齐方式，但您可以尝试使用inline-block并浮动其他元素：

.fl, .fr {
    display:inline-block;
    vertical-align:bottom;
    width:50%;
}
.fr > div {
    float:right;
    clear:right;
}

选中 Demo Fiddle

请注意，如果您使用inline-block，请不要忘记删除空格CSS TRICKS，我会使用评论

Answer 2

你可以做这样的事情

JS Fiddle

.fl {
position:absolute;
bottom:0;
}

.wrap{
width:100%;
display:inline-block;
position:relative;
}

为.wrap（父级div）添加<div width="100%" class="clear wrap">课程，以清除.fr或0px身高

的浮动

Answer 3

让我们用display: table解决这个问题并稍微更改一下HTML。我们会这样说出来：

<div class="table">
    <div class="cell left">I am going to be aligned at the bottom vertically</div>
    <div class="cell">I am going to contain three rows</div>
</div>

现在为CSS。根据需要调整此项。在这个例子中：

html,body { height: 100%; }允许包装器div具有百分比高度
包装器div被赋予display: table，height: 100%和width: 100%
两个＆＃34;列＆＃34;给予display: table-cell并按行列
左栏提供vertical-align: bottom
.cell > div定位.cell班级的直接儿童。在这个例子中，这些div每个都有33.33％的高度，可以将它们均匀地分隔成行

CSS / HTML / Demo

＆＃13;

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.table {
    display: table;
    height: 100%;
    width: 100%;
    border-bottom: solid 1px #333;
}
.cell {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
.left {
    vertical-align: bottom;
    height: 100%;
    border-right: solid 1px #333;
    background: #DDD;
}
.cell > div {
    height: 33.33%;
    background: #EEE;
    border-bottom: solid 1px #333;
}
.cell > div:last-child {
    border-bottom: none;  /* no border for that last child */  
}

＆＃13;

<div class="table">
    <div class="cell left">I want this aligned to bottom</div>
    <div class="cell">
        <div>Row 1</div>
        <div>Row 2</div>
        <div>Row 3</div>
    </div>
</div>

＆＃13;

将浮动div对齐到底部

3 个答案: