-2

この例で階段効果を取り除くことは可能ですか? 1 つの div が右に浮いており、固定の高さと固定幅の div が左に浮いています。div がどこかで出会うと、かなり奇妙な階段効果が得られます。

なぜこれが起こるのかはわかっていますが、これを回避するための解決策を探しています。私を助けてください

<div class="container">
  <div class="fright">just some contents floating right</div>
  <div class="fleft">a div</div>
  <div class="fleft">
        this one is the problem. 
        Is it possible to have this div start at position B
  </div>
  <div class="fleft"><b>Position B</b></div>
  <div class="fleft">a div</div>
</div>

とcss

div{
    margin:10px;
    padding:10px;


.container{
    width:460px;
    float:left;
}

.fright{
    float:right;
    border:1px solid green;
}

.fleft{
    float:left;
    height:180px;
    width:180px;
    border:1px solid orange;
}​

http://jsfiddle.net/FusWd/1/

4

1 に答える 1

2

フロートを使用する代わりに、インライン ブロックを使用してレイアウトを行うことをお勧めします。

ここであなたの例を更新しました：http://jsfiddle.net/FusWd/4/

この手法にはいくつかの注意事項があります。

  • IE 6-7 はインライン ブロックをサポートしていないため、'hasLayout' トリックを使用する必要があります。
  • inline-block 要素は、マークアップ内の空白の影響を受け、レイアウトが壊れる場合と壊れない場合があります。これにはいくつかの解決策があります。
    • マークアップのインライン ブロック要素間の空白を削除できます
    • 親要素の font-size と line-height を 0 に設定し、letter-spacing と word-spacing プロパティを -1px に設定してから、font-size と line-height を目的の値にリセットし、letter-spacing と word-値へのスペーシング プロパティnormal。
于 2012-11-19T13:18:48.787 に答える