1

フローティング div のテキストを下に垂直に揃えようとしていますが、うまくいかないようです。これが私が現在持っているものです：

<div class="header_left">TEXT</div>

CSS:

.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
}

2 つの div を並べて配置したいので、div をフローティングする必要がありますが、テキストを div の一番下に移動できないようです。

4

3 に答える 3

2

ワーキングデモ

相対位置と絶対位置でこれを実現するには、2 つの div が必要です。

<div id="container">
  <div id="content">Bottom Content</div>
</div>​

#container
{ 
    position: relative; 
    height: 200px;
    background-color: #eee;
}

#content 
{ 
    position: absolute; 
    bottom: 0; 
}​
于 2012-12-15T14:15:16.523 に答える
1

http://jsfiddle.net/2Z6tA/1/

<div class="header_left">
    <span id="bottom">Text at bottom</span>
</div>

CSS:-

.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
height:100px;
position: relative;    
}

span#bottom{
    position: absolute;    
    bottom: 0;
}
于 2012-12-15T14:22:10.137 に答える
0

div コンテナーが必要ない場合に試してみるもう 1 つの方法は、上下のマージンを設定することです。例えば：

.header_left {
margin-top:50%
margin-bottom:50%
}

測定値をいじる必要があります。50% は常に使用する量ではありません。私が取り組んでいたモバイル サイトのボタンのフローティング :before イメージを垂直方向に配置するために 9% を使用しました。

于 2016-09-26T18:57:34.827 に答える