html - 用于响应式屏幕尺寸的 CSS div

Question

我有 Logo 和 Logo 名称作为要显示的文本。请查看下图以清楚地了解我的问题。 找到的大多数提示和答案都使用绝对定位，但这不符合我的要求。

div 类框: 黄色:容器，绿色:用于 Logo ，蓝色: Logo 文本或 Logo 名称作为文本

在上面的示例 div 布局图像的右侧可以找到要实现的所有正确显示。

问题总结:

1. 如果 div( Logo 和 Logo 文本)都向左浮动，一切都会正常工作但是唯一的问题是它 float 在顶部。如何在“容器”底部显示“ Logo 文本”？

2. 如果不将“ Logo 文本”定位为绝对值，这可能吗？

目前，div 容器、 Logo 和 Logo 文本类向左浮动。

Answer 1

我认为 display: inline-block 和 vertical-align: bottom; 让你到达你想去的地方；

<div class=logo>logo</div>
<div class=name>name</div>​

.logo {
    display: inline-block;
    vertical-align: bottom;
    width: 200px;
    height: 200px;
    background-color: red;
}
.name {
    display: inline-block;
    vertical-align: bttom;
    width: 300px;
    height: 50px;
    background-color: blue;
}

它正在运行:http://jsfiddle.net/hajpoj/CDBHT/