ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnose の要素の下部にテキストを沈める方法
css_html/css_WEB-ITnose の要素の下部にテキストを沈める方法
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:27:582171ブラウズ
CSS でテキストを要素の下部に沈める方法:
実際のアプリケーションでは、指定されたテキストを要素の下部に沈める必要がある場合があります。
以下では、コード例を通してこの効果を実現する方法を紹介します。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{ width:200px; height:100px; background:#CCC; position:relative;}#box span{ position:absolute; bottom:0px;}</style></head> <body><div id="box"> <span>蚂蚁部落</span></div></body></html> 上記のコードは要件を実現しており、原理は比較的単純です。
span 要素内にテキストを配置し、span 要素を絶対配置に設定して、box 要素の下部に配置します。
span 要素の位置決め参照オブジェクトが box 要素になるように、box 要素は相対位置決めを使用する必要があります。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15954
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。