Html 底部对齐

我有两个div，一个是左浮动的较大字体，另一个是右浮动的较小字体。我想将较小的字体DIV与与较大的文本对齐的底部对齐。无法实现它

还有css

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.font12 {
    font-size: 12px;
}

活动

根据您的要求更改答案以允许浮动

请看

HTML

<div class="big">Activity</div>

<div class="small"> 
    <a href="javascript:void(0);">View timeline / Filter activities
    </a>
</div>

所需CSS：

---

因此，使两个元素

内联块

显示，并且

垂直对齐

值为

底部

，它们将处于同一级别，它们的参考线将是它们的底部。除了上述响应之外，您可以使用display:table单元格将两个div调整到相同的高度：

.floatLeft{
边框：1px纯黑；
字体大小：30px；
宽度：200px；
显示：表格单元格；
垂直对齐：文本底部；
}
.对{
边框：1px纯黑；
字体大小：12px；
显示：表格单元格；
垂直对齐：文本底部；
宽度：200px；
}

活动

jsiddle:

下面是一个带有

内联块的解决方案

：

.big {
    display:inline-block;
    width: 50%;
    float: left;
    font-size: 2em
}
.small {
    display:inline-block;
    width: 50%;
    font-size: 1em
}
a {
    float:right;
}

---

你忘了放CSS。不要

float

。使用Flexbox。你可以用Flexbox“浮动”任何东西。这很复杂。慢慢来学吧。这是值得的@rudie使用flexbox可能是一件棘手的事情，因为您必须为所有不同的浏览器和版本处理它。使用

内联块

是一个更干净的解决方案。@akshay你说得对。在这种情况下，Flexbox太复杂了。@nicael CSS:.floatLeft{float:left；}.floatRight{float:right；}.font12{font size:12px；}页面的默认字体是16px。这种方法可行，但两个div的文本都可以更改，在这种情况下，固定它们的宽度不是一个好主意。我希望它们都像我编码的那样左右对齐。这种方法有效，但这里第二个DIV正好在第一个DIV的旁边。我希望它们都像我所编码的那样左右对齐。当屏幕尺寸较小时，此解决方案将把较小的div包装在

.big

div下面

.big {
    display:inline-block;
    vertical-align:bottom;
    /* just for demo: */
    font-size: 2em;
    height:200px; 
    background:#FADDFF;
}

.small {
    display:inline-block;
    vertical-align:bottom;
    /* just for demo: */
    font-size: 1em;
    background:#D2E9F7;
    height:120px;
}

.big {
    display:inline-block;
    width: 50%;
    float: left;
    font-size: 2em
}
.small {
    display:inline-block;
    width: 50%;
    font-size: 1em
}
a {
    float:right;
}