ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS が content_html/css_WEB-ITnose に従って div 幅適応型を実装する方法
CSS が content_html/css_WEB-ITnose に従って div 幅適応型を実装する方法
- WBOYオリジナル
- 2016-06-24 11:31:521679ブラウズ
CSS の内容に応じて div 幅を適応させる実装方法:
推奨: コードをできるだけ手書きすることで、学習効率と深さを効果的に向上させることができます。
実際のアプリケーションでは、このような要件が存在する可能性があります。つまり、div の幅をコンテンツに応じて適応させる必要があります。多くの開発者は、div の幅が設定されていない場合、幅がコンテンツに適応できると誤解している可能性があります。実際、これは間違いです。デフォルトでは、div の幅の値は 100% であり、それが占有されることを意味します。親要素全体の幅。
コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:400px; height:400px; border:1px solid red;}.children{ border:1px solid blue; height:50px;}</style></head><body><div class="parent"> <div class="children">欢迎来到蚂蚁部落，今天阳光不错！</div></div></body></html> 上記のコードから、デフォルトの状態では必要な効果を達成できないことがわかります。
上記のコードは次のように変更されます:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:400px; height:400px; border:1px solid red;}.children{ border:1px solid blue; height:50px; display:inline-block; *display:inline; *zoom:1;}</style></head><body><div class="parent"> <div class="children">欢迎来到蚂蚁部落，今天阳光不错！</div></div></body></html> 上記のコードは私たちが望む効果を実現し、さまざまなブラウザーとの互換性が優れています:
display:inline-block; *display:inline; *zoom:1;
元のアドレス。 http://www.softwhy.com/forum.php?mod=viewthread&tid=4629
詳細については、http://www.softwhy.com/divcss/
を参照してください。声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。