Question

我想把我的div从左到右漂浮在彼此之下，就像这样：

但我得到的是：

1  2
3  4

有谁知道如何正确地做到这一点？感谢

Answer 1

你漂浮的div，做一个明确的：对;你向右浮动的div做了一个明确的：左;

应该有用。

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;
}

And a demo

CSS浮动从左到右分开

4 个答案: