div の 1 つの列には固定幅があり、div の 1 つの列には適応幅があります_html/css

div の 1 つの列には固定幅があり、div の 1 つの列には適応幅があります_html/css_WEB-ITnose

WBOY

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

オリジナル

1250 人が閲覧しました

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/