0

次のような LI コンテンツを使用するときに、この奇妙なカスケード効果を防ぐにはどうすればよいですか? http://jsfiddle.net/arPzt/1/

各 LI の後に BR を挿入することで目的の動作を実現できますが、a) LI 間の垂直方向の間隔はコンテンツの長さによって異なるようであり、b) これを実現するためのより良い/より適切な方法が必要です。

<ul>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>    
</ul>
4

3 に答える 3

2

要素をフローティングしていますが、前の行をクリアしたい場合は、右のフローティング要素を使用する場合はclear: leftorを使用する必要があります。clear: both

li {
  clear: left;
}

jsFiddle: http://jsfiddle.net/arPzt/3/

于 2013-05-02T22:11:44.583 に答える
1

あなたがする必要があるのは、各LIの後に単に「フロート」をクリアすることだと思います

このような：

<li style="clear:both;">
于 2013-05-02T22:16:54.603 に答える
1

提案に代わるものとして、代わりにli 要素clear:leftを使用することを検討することをお勧めします。overflow:hidden

この単純な例をclear:left修正しても、リストに続く追加のコンテンツでレイアウトの問題が発生する可能性があります。overflow:hiddenli 要素で使用すると、フローティング効果がそれらのアイテムだけに制限されます。

詳細については、この記事を参照してください。

于 2013-05-02T22:57:34.727 に答える