CSS が content_html/css_WEB-ITnose に従って div 幅適応型を実装する方法-htmlチュートリアル-php.cn

CSS が content_html/css_WEB-ITnose に従って div 幅適応型を実装する方法

WBOY

リリース： 2016-06-24 11:31:52

オリジナル

1680 人が閲覧しました

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/

を参照してください。