css - 広いコンテンツ スペースのいくつかのブロックに浮かぶ

Question

私の現在のプロジェクトでは、いくつかのブロックを左にフロートする必要があります。私のコンテンツ ブロックの幅は 720px ですが、ブロックの幅は 350px です。しかし、どういうわけか、それらは互いに浮かんでいません。それらのいくつかはそうです、いくつかはそうではありません。各ブロックにルール float:left を追加しました。私は手でそれらを浮かせますが、ブロックの順序がわからないので、どのように見えるかを予測できません。これが現在どのように見えるかのスクリーンショットです: http://d.pr/i/OKpc

Answer 1

私があなたの質問を正しく理解しているなら、ここにいくつかの異なる解決策があります。まず、いくつかの最新のセレクターを使用してclear: left、すべての偶数ブロックに追加できます。

.block-views:nth-child(2n+1) { clear: left; }

これは、InternetExplorer8以下では機能しません。

clear: both次の解決策は、 2ブロックごとに追加のdivを追加することです。

HTML：

<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>

CSS：

.clear { clear: both; }