html - CSS フロート div を左から右に並べて配置

Question

次のように、div を左から右に並べてフロートさせたいと思います。

1
   2
3 
   4

しかし、私が得るものは次のとおりです。

1  2
3  4

これを適切に行う方法を知っている人はいますか？ありがとう

Answer 1

左に浮かせた div は、clear:right; を実行します。そして、右に浮かせた div は clear:left; を実行します。

動作するはずです。

Answer 2

これを試して

<div style="float:left;">1</div>
<div style="clear:left;"></div>

<div style="float:right;">2</div>
<div style="clear:right;"></div>

<div style="float:left;">3</div>
<div style="clear:left;"></div>

<div style="float:right;">4</div>
<div style="clear:right;"></div>

Answer 3

を使用する代わりに、次の使用floatを検討してmarginください。

たとえば、HTML が次のようになっているとします。

<div id="zigzag">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

次に、CSS は次のようになります。

#zigzag>* {width:50%}
#zigzag>:nth-child(even) {margin-left:auto}