71

スタック オーバーフローの他の投稿や回答からテキストを div の下部に揃えようとしました。これをさまざまな CSS プロパティで処理することを学びました。しかし、私はそれを成し遂げることができません。基本的に、私の HTML コードは次のようになります。

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
  <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

その効果は、FF では垂直線 (折りたたまれた方法で div) を取得するだけで、テキストはその横に書き込まれます。div折りたたみを防ぎながら、幅をテキストに合わせるにはどうすればよいですか?

4

2 に答える 2

146

フレックス ソリューション

display: table-cellソリューションを使用したい場合は、まったく問題ありません。しかし、ハッキングする代わりに、 を使用して同じことを達成するためのより良い方法がありdisplay: flex;ます。まともなサポートflexがあるものです。

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}
<div class="wrap">
  <span>Align me to the bottom</span>
</div>

上記の例では、最初に親要素を to に設定しdisplay: flex;、後で to を使用align-selfしflex-endます。これは、アイテムをflex親の最後にプッシュするのに役立ちます。

古いソリューション (使用したくない場合に有効flex)

テキストを下に揃えたい場合は、そのために多くのプロパティを記述する必要はありません。display: table-cell;withを使用するvertical-align: bottom;だけで十分です。

div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}
<div>Hello</div>

(または JSFiddle)

于 2013-06-15T11:54:11.780 に答える