0

自動生成された HTML コードがいくつかあります。

共有クラスに を追加するfloat:left;と、次のようになります。

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   +--------------+
|                |   |   div 3      |
+----------------+   +--------------+

そして、私が欲しいのはこれです：

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   
|                |   
+----------------+   

+--------------+
|   div 3      |
+--------------+

どうすればこの結果を得ることができますか?

私のCSSコードは次のようになります：

position: relative;
width: 40%;
float: left;
border: 1px solid black;
clear: left;
4

3 に答える 3

1

div に などの共通のクラス名があると仮定すると、次の.boxesCSS を追加します。

.boxes:nth-child(odd) {clear: left;}

これにより、すべての奇数番号のボックスがフロートをクリアして新しい行を開始するようになります。

または、2 つのボックスのみが横に収まるようにコンテナーの幅を設定し、display: inline-block代わりに を使用しfloat: left;ます。

于 2012-06-25T00:04:01.293 に答える
1

clear: left;div 3に追加するだけです

編集::nth-child(2n+1)または:nth-of-type(2n+1)css3 セレクターを使用するだけです

于 2012-06-24T23:55:59.443 に答える
0

clear:both; の CSS プロパティを持つ要素を追加します。2 番目の DIV の後、次のようになります。

<div id="first"></div>
<div id="second"></div>
<br class="clear_both" />
<div id="third"></div>

次にCSSで：

.clear_both {
    clear:both;
    height:0;
    width:0;
}
于 2012-06-25T00:01:37.957 に答える