ホームページ > 記事 > ウェブフロントエンド > 2 列の div 幅adaptive_html/css_WEB-ITnose
2 列の div 幅adaptive_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:231246ブラウズ
2 列の div 幅適応:
推奨: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
前のチュートリアルでは、div の列の適応幅を導入しました。適応効果を実現する主な手段は、オブジェクトの幅属性値をパーセンテージに設定することです。
コード例:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">.left{ width:30%; height:50px; background-color:green; float:left;}.right{ width:70%; height:50px; background-color:blue; float:left;}</style></head><body><div class="left">我是左边</div><div class="right">我是右边</div></body></html> 上記のコードは、パーセンテージを使用して 2 つの並列 div の幅を設定し、2 列 div の適応幅を実現します。上記のコードで設定された効果では、ウィンドウのサイズがどのように変更されても、2 つの div はそれぞれウィンドウの幅の 30% と 70% を占めます。
上記のコードは実際に使用すると問題が発生することがよくあります。例:
rrree
上記のコードを実行すると、2 つの div がラップされていることがわかります。これは、オブジェクトが占める実際の幅は width 属性によって決まるだけでなく、マージン、境界線の幅、およびパディングもオブジェクトが占める実際の幅に影響を与えるためです。したがって、上記のコードの 2 つの div の幅の 30% と 70% の合計がちょうど 1 ウィンドウの幅である場合、境界線の幅を加えたものがウィンドウの幅を超えるため、改行が発生します。クリックしてボックス モデルを表示すると、上記のコードを理解するのに役立ちます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4768
詳細については、以下を参照してください: http://www.softwhy.com/divcss/