2 つの div が並んでいる場合、右側の div が残りのスペースを埋める必要がありますか? _html/css

2 つの div が並んでいる場合、右側の div が残りのスペースを埋める必要がありますか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:37:21

オリジナル

1685 人が閲覧しました

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% 幅

2 番目のメソッドは div1 のみをフローティングにし、div2 を 100% 幅にして (フローティングではなく)、div1 が div2 を自然にカバーし、その後 div2 が処理されます。それに応じて。
これは、左側の高さが右側の高さ以上である場合に適しています。
.div1 {
フロート: 左; 幅: 15%;
背景色: 100% ;

属性

width: 85%;

ログイン後にコピー

を .div2 に追加します