BinaryDevelop
  1. ホーム
  2. css

2つのfloat divを内包するdivを作成するには？

2023-08-23 04:45:41

質問

私はそれが一般的な問題であるかどうかわからないが、私はこれまでのところ、Webで解決策を見つけることができません。 私は別のdivの中に2つのdivをラップしたいのですが、これらの2つの内側のdivは同じレベルに整列する必要があります（例：左の1つはwrapDivの20％の幅を取り、右の1はさらに80％を取ります）。この目的を達成するために、私は次の例のCSSを使用しました。しかし、今度はwrap DIVがこれらのDivをすべて包むことはなかった。ラップDIVは、内部に含まれているこれらの2つのDIVよりも小さな高さを持っています。どうしたら、wrap Divが含まれるdivと同じ高さになるようにできますか？ありがとうございます!!! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>

どのように解決するのですか？

ブロックの中に2つのフロートがある場合、よくある問題です。 これを解決する最良の方法は clear:both の後に div . 

<div style="display: block; clear: both;"></div>

コンテナの高さを強制的に正しい高さにする必要があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します