Question

我只是想垂直改变元素的流动。就像下面的示例一样：

但是默认情况下，Html元素是水平工作的。像这样：-

#container {
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid green;
    padding: 4px;
}
#secondcolumn {
    position: absolute;
    margin-left: 200px;
    margin-top: -90px;
}
#secondcolumn > span {border:1px solid red;}
#container > span {border:1px solid blue;}

<div id="container">
<span>1.</span>
<span>i am flowing horizantally.</span>
<span>2.</span>
<span>i am flowing horizantally.</span>
<span>3.</span>
<span>i am flowing horizantally.</span>
<span>4.</span>
<span>i am flowing horizantally.</span>
<span>5.</span>
<span>i am flowing horizantally.</span>
<span>6.</span>
<span>i am flowing horizantally.</span>
<h4>Elements have to flow like this:-</h4>
<span>1.</span>
<span>i am flowing vertically.</span>
<br>
<span>2.</span>
<span>i am flowing vertically.</span>
<br>
<span>3.</span>
<span>i am flowing vertically.</span>
<br>
<span>4.</span>
<span>i am flowing vertically.</span>
<br>
<span>5.</span>
<span>i am flowing vertically.</span>
<div id="secondcolumn">
<span>6.</span>
<span>i am flowing vertically.</span>
<br>
<span>7.</span>
<span>i am flowing vertically.</span>
<br>
<span>8.</span>
<span>i am flowing vertically.</span>
</div>
</div>

从上到下而不是从左到右排列元素（浮动：向下？）

Answer 1

我建议您像这样使用flex：

#container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 400px;
    height: 100px;
    border: 1px solid green;
    padding: 4px;
}

#container > span {border:1px solid blue;}

<div id="container">
<span>1. i am flowing horizantally.</span>
<span>2. i am flowing horizantally.</span>
<span>3. i am flowing horizantally.</span>
<span>4. i am flowing horizantally.</span>
<span>5. i am flowing horizantally.</span>
<span>6. i am flowing horizantally.</span>
<span>7. i am flowing horizantally.</span>
<span>8. i am flowing horizantally.</span>
<span>9. i am flowing horizantally.</span>
</div>

Answer 2

您可以尝试跨度使用display: block。像这样：

您知道如何保持“ 1”。和“我在水平流动”。只需保持它们的跨度相同即可。

#container {
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid green;
    padding: 4px;
}

#container span{
    display: block;
}
#secondcolumn {
    position: absolute;
    margin-left: 200px;
    margin-top: -90px;
}
#secondcolumn > span {border:1px solid red;}
#container > span {border:1px solid blue;}

<div id="container">
<span>1.</span>
<span>i am flowing horizantally.</span>
<span>2.</span>
<span>i am flowing horizantally.</span>
<span>3.</span>
<span>i am flowing horizantally.</span>
<span>4.</span>
<span>i am flowing horizantally.</span>
<span>5.</span>
<span>i am flowing horizantally.</span>
<span>6.</span>
<span>i am flowing horizantally.</span>
<h4>Elements have to flow like this:-</h4>
<span>1.</span>
<span>i am flowing vertically.</span>
<br>
<span>2.</span>
<span>i am flowing vertically.</span>
<br>
<span>3.</span>
<span>i am flowing vertically.</span>
<br>
<span>4.</span>
<span>i am flowing vertically.</span>
<br>
<span>5.</span>
<span>i am flowing vertically.</span>
<div id="secondcolumn">
<span>6.</span>
<span>i am flowing vertically.</span>
<br>
<span>7.</span>
<span>i am flowing vertically.</span>
<br>
<span>8.</span>
<span>i am flowing vertically.</span>
</div>
</div>

Answer 3

css flexbox可以执行此操作，但是旧浏览器不支持。

.container {
  position: absolute;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 1px red;
}

.container > div {
  width: 50%;
  border: solid 1px blue;
}

<div class="container">
<div>
<span>1.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>2.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>3.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>4.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>5.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>6.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>7.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>8.</span>
<span>i am flowing vertically.</span>
</div>
</div>

以下是受支持的浏览器的链接：https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

根据容器的高度垂直流动元素

3 个答案: