ホームページ > 記事 > ウェブフロントエンド > div の 1 つの列には固定幅があり、div の 1 つの列には適応幅があります_html/css_WEB-ITnose
div の 1 つの列には固定幅があり、div の 1 つの列には適応幅があります_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:231251ブラウズ
1 つの列は固定され、1 つの列の幅は適応的です:
推奨: コードをできるだけ手書きすることで、学習の効率と深さを効果的に向上させることができます。
前のコードでは、1 列幅の適応と 2 列幅の適応が導入されました。適応の効果は、一般に、対応するオブジェクトの幅をパーセンテージの形式で表すことです。実際のレイアウトでは、1 つの列は固定幅、もう 1 つの列は適応幅になります。左側の div が固定幅で、右側の div が適応幅を持つ例を考えてみましょう。
コード例:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">body{ margin:0px; padding:0px;}.left{ width:200px; height:50px; background-color:green; position:absolute; left:0px;}.right{ height:50px; background-color:blue; margin-left:200px;}</style></head><body><div class="left">我是左边</div><div class="right">我是右边</div></body></html> 上記のコードでは、左列 div の幅は 200px の固定値であり、ドキュメント フローの外に絶対的に配置され、周囲の div。このとき、右 div の左マージンを左 div の幅と同じに設定し、自己幅使用の効果を実現するためにこの div の幅を設定しないでください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4767
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。