CSS divs用于响应屏幕尺寸

Question

我有徽标和徽标名称作为要显示的文字。请参阅下面的图像以清楚地了解我的问题。 发现的大多数提示和答案都使用绝对定位，但这不符合我的要求。

div类框： 黄色：容器，绿色：用于徽标，蓝色：徽标文本或徽标名称为文本

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

问题摘要：

1. 如果div（徽标和徽标文本）都浮动，那么一切都会正常工作但是唯一的问题是它浮在上面。如何在“容器”底部显示“徽标文字”？

2. 如果不将“徽标文字”定位到绝对值，这是否可行？

现在，div容器，徽标和徽标文本类都会向左浮动。

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/

Answer 2

调整结果窗口大小以查看效果。

DEMO

让您的孩子成为inline-block是解决方案。此外，您需要为容器指定max-width和min-height属性，以便重新调整大小以适合您的内容。请参阅此解决方案 -

HTML -

<div id="con">
    <div id="lo"></div>
    <div id="tex"></div>
</div>

CSS -

#con
{
    max-width:310px;
    min-height:140px;
    background:yellow;
    border: 1px solid aqua;
}

#lo
{
    width:140px;
    height:140px;
    background:green;
    display:inline-block;
    vertical-align:bottom;
}

#tex
{
    width:160px;
    height:60px;
    background:orange;
    display:inline-block;
    vertical-align: bottom;
}