40

本当に単純な質問で申し訳ありませんが、これらの線に沿って定義済みの幅で左と右に 1 つの div をフロートさせようとしました

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

これは「ほとんど」機能しますが、その下のページの他の要素を台無しにしているようです。

では、ページ上の他の要素に影響を与えることなく、CSS を使用して HTML ページを垂直に 2 つの部分に分割する正しい理由は何でしょうか?

4

7 に答える 7

47

あなたが使用することができます..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

これより下の要素は影響を受けません。

于 2012-07-26T04:55:42.190 に答える
14

overflow:auto; を追加するだけです。親divへ

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

ワーキングデモ

于 2012-07-26T04:55:15.997 に答える
8

フロートをクリアしていないため、ページ上の要素が台無しになっていると思います。これを確認してください

デモ

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}
于 2012-07-26T04:57:34.343 に答える
3

floatを両方持つことで解決することもありますleft。

これを試してください：

ワーキングデモ

PSこれはAnkitの回答の単なる改善です

于 2012-12-21T17:39:15.010 に答える
0

フレックスボックスのアプローチは次のとおりです。

CSS

 .parent {
  display:flex;
  height:100vh;
  }
  .child{
    flex-grow:1;
  }
  .left{
    background:#ddd;
  }
  .center{
    background:#666;
  }

  .right{
    background:#999;
  }

HTML

<div class="parent">
    <div class="child left">Left</div>
    <div class="child center">Center</div>
    <div class="child right">Right</div>
</div>

js fiddleで同じことを試すことができます。

于 2020-02-11T09:24:56.020 に答える