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}

Answer 4

制作一个包装器 div 并让内部 div 相互接触只是一个片段：

HTML：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS：

body > div {
    background: lightgreen;
    width: 99px;
    overflow: auto;
}
div > div {
    width: 50px;
    height: 50px;
}
div > div:nth-child(2n-1) {
    background: lightyellow;
    float: left;
}
div > div:nth-child(2n) {
    background: lightblue;
    float: right;
}

和一个演示