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

Question

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

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

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

问题总结：

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

2. 如果不将“徽标文本”定位到绝对位置，这可能吗？

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

Answer 1

我认为display: inline-blockwithvertical-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;
}

​</p>

这是在行动：http: //jsfiddle.net/hajpoj/CDBHT/

Answer 2

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

演示

让你的孩子 divinline-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;
}