divのcssがフローティングなdivsと重なっていますか？

私はかなり初心者です。なぜ私のCSSが正しく動作しないのかを調べようとしています。問題は、id＃zona6のdivの背景色を緑に設定していますが、id＃zona2と＃zona3のdivに色が当てはまります。divのcssがフローティングなdivsと重なっていますか？

しかし、背景色はid＃zona6のdivと同じ比率を持ち、chromeのinspect要素ではdivは色のところにあるように見えますが、その中のテキストは＃zona4以下です＃zona5、どこにあるべきか...私はすべてのdivの表示と位置を三重にチェックしました。それらはすべて相対的なブロックに設定されています。また、body要素に物を入力すると、div＃zona6のテキストが重なって表示されます（これはdiv＃zona6が実際に＃zona2と＃zona3と重なっているため一種です）。

私もInternet Explorerでテストしましたが、問題は見つからず、シンプルでなければなりませんが、私はそれを取得しません。

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

index.cssファイルは空です。

出典

2017-02-14 Marc Spataru

を助け願っています。要素内のコンテンツに基づいて計算されるパーセント。同じ内容またはPXを高さに入れてください。 –

だけ追加hereを見つけることができますそれは最寄りのフロートここ
に浮きませんClear:both;#zona6への道は、あなたが緑の背景を見ているjsfiddle

出典

2017-02-14 18:14:37

ありがとう！出来た。 –

divの一部にfloat値を使用しているので、残りのdivにもfloatを適用する必要があります。 #zona6の浮動小数点値を指定していないので、#zone6が他のものと重なっているのが見える理由は、自動的に#zona1になります。あなたはfloatプロパティを使用するときにclearfix技術を適用する必要が

<html> 
 

 
<head> 
 
    <style> 
 
     #zona1 { 
 
      height: 15%; 
 
      float: left; 
 
     } 
 
     
 
     #zona2 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
      background-color: blue; 
 
     } 
 
     
 
     #zona3 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona4 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona5 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona6 { 
 
      height: 15%; 
 
      background-color: green; 
 
      width: 100%; 
 
      float: left; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="zona1"> 
 
     vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
    </div> 
 
    <div id="zona2"> 
 
     vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
    </div> 
 
    <div id="zona3"> 
 
     ntrbrt 
 
    </div> 
 
    <div id="zona4"> 
 
     htrrwt 
 
    </div> 
 
    <div id="zona5"> 
 
     hb5ynyre 
 
    </div> 
 
    <div id="zona6"> 
 
     hh3653gterbwtebt 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-02-14 18:11:38 Nitheesh

それをダウンさせるためにfloat: leftとwidth: 100%を提供します。その後

を「フローティング」している人たちの後の要素にclearfixクラスを適用し、あなたのCSSに以下のものがあります。

.clearfix:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

いくつかの助けが（ポルトガル語）

出典

2017-02-14 18:12:14

です＃zona4と＃zona5に浮動小数点のプロパティが残っているためです。浮動小数点は、典型的なドキュメントフローの外側でこれらの要素を移動しており、緑色の背景がそれらの背後にあるため、実際には緑色の背景を持っていません。クリアフィックスはあなたが望む効果を与えるはずです。これは、浮動小数点演算が奇妙な方法で動作するケースの1つです。

多くの場合、inspect要素を使用して各cssプロパティの効果を個別に確認することが重要です。 Chromeを使用している場合は、ページを右クリックしてinspectオプションを選択し、ページのhtml要素をクリックすると、右側のcssプロパティが表示されます。各CSSプロパティをオン/オフに切り替えて、その効果を確認することができます。 -Alyssa

出典

2017-02-14 18:15:27

解決しやすいです。 displayが設定されていないため、そのように動作します。 display: inline-blockを追加すると、そのように動作します...まあ...ブロック;）

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
    /* display: block; */ /* to make it appear on the next line. */ 
 
    display: inline-block; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

は、私はそれはあなたが高さにピクセルを固定しない％を使用している、これはある:)

出典

2017-02-14 18:18:49 Evochrome

divのcssがフローティングなdivsと重なっていますか？

答えて

関連する問題