0

次のコードがあります。

<div style="background-color:Aqua">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>

表示したい...

left                                                                        right

...背景は水色ですが、ブロックは色で塗りつぶされません。

私は何を間違っていますか？

4

3 に答える 3

0

堅牢なクリアフィックス、特にこれを使用することをお勧めします：http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

このCSSを追加します。

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

次に、あなたの含む親アクアdivにclass="clearfix"

これがフィドルのデモンストレーションです。

于 2012-11-27T00:49:23.320 に答える
0

フロート-ポジショニングのルールは何かに依存しているため、その何かがないとオブジェクトを整列させることはできません。したがって、次のシーケンスを使用する必要があります。

<div style="background-color:Aqua">
  <div style="float:right;max-width:50%;">Right</div><!-- 100% by default -->
  <div>Left</div>
  <div style="clear:right;"></div><!-- closing the floating -->
</div>

それ以外の場合：

<div style="background-color:Aqua">
  <div style="float:left;max-width:50%;">Left</div>
  <div>Right</div>
  <div style="clear:left;"></div>
</div>

または両方：

<div style="background-color:Aqua">
  <div style="float:left;max-width:30%;">Left</div>
  <div style="float:right;max-width:30%;">Right</div>
  <div>Center</div>
  <div style="clear:both;"></div>
</div>
于 2012-11-27T00:47:45.423 に答える
0

たとえば、フロートをクリアしますoverflow: hidden

<div style="background-color:Aqua; overflow: hidden">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>
于 2012-11-27T00:40:56.020 に答える