ホームページ >ウェブフロントエンド >htmlチュートリアル >2 つの div が並んでいる場合、右側の div が残りのスペースを埋める必要がありますか? _html/css_WEB-ITnose
2 つの div が並んでいる場合、右側の div が残りのスペースを埋める必要がありますか? _html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:37:211719ブラウズ
2 つの div が並んでいますが、右側の div が残りのスペースを埋める必要がありますか? CSS の定義方法
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title></title> <%--<link rel="stylesheet" type="text/css" href="css/main.css">--%> <style type="text/css"> .div1 { background-color: lightseagreen; width: 15%; height: 100%; float: left; } .div2 { background-color: chocolate; height: 100%; float: left; } </style></head><body> <div class="div1"> DIV1 </div> <div class="div2"> DIV2 </div></body></html> 2 つの div が並んでいますが、右側の div が残りのスペースを埋める必要がありますか? CSS を定義する方法
ディスカッション (解決策) への返信
div2 を右に浮かせてから、2 つの div に固定幅を設定しようとします、
div2 width: 85%;
div2 float right を作成し、2 つの div に固定幅を設定します。
float right?具体的なコードを教えていただけますか？
div2 width: 85%;
この方法を使用しましたが、もっと簡単な方法はありますか?
最初のタイプは両方とも左に浮動し、幅はそれぞれ対応するパーセンテージを占めます (div1 と div2 には幅に影響するパディングマージンとその他の属性があることに注意してください)
2 つの div の高さは異なっていても構いません
div1 15% + div1 85% = 100% 幅
c9ccee2e6ea535a969eb3f532ad9fe89
浮動小数点: 左; 幅: 15%;
.div2 {
浮動小数点数: 左; : 85%;
背景色: チョコレート
}
531ac245ce3e4fe3d50054a55f265927
2 番目のメソッドは div1 のみをフローティングにし、div2 を 100% 幅にして (フローティングではなく)、div1 が div2 を自然にカバーし、その後 div2 が処理されます。それに応じて。
これは、左側の高さが右側の高さ以上である場合に適しています。
.div1 {
フロート: 左; 幅: 15%;
背景色: 100% ;
属性
width: 85%;を .div2 に追加します