1

表示するテキストとしてロゴとロゴ名があります。私の問題を明確に理解するには、下の画像を参照してください。見つかったほとんどのヒントと回答は絶対配置を使用していますが、これは私の要件と一致しません。 ここに画像の説明を入力

div クラス ボックス: 黄: コンテナー、緑: ロゴ、青: ロゴ テキストまたはテキストとしてのロゴ名

上記のサンプル div レイアウト イメージの右側には、達成すべきすべての正しい表示が示されています。

問題の概要:

  1. 両方の div (ロゴとロゴ テキスト) が左に浮いている場合はすべて正常に機能しますが、唯一の問題は上に浮いていることです。「コンテナ」の下部に「ロゴテキスト」を表示するにはどうすればよいですか?

  2. 「ロゴテキスト」を絶対に配置せずにこれは可能ですか?

今のところ、div コンテナ、ロゴ、およびロゴ テキスト クラスは左にフロートされています。

4

2 に答える 2

2

私はあなた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;
}

</ p>

ここで動作しています：http：//jsfiddle.net/hajpoj/CDBHT/

于 2012-12-15T05:52:08.130 に答える
0

結果ウィンドウのサイズを変更して効果を確認します。

デモ

子 div を作成する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;
}
于 2012-12-15T06:02:43.200 に答える