我只是想垂直改变元素的流动。就像下面的例子:
但默认设置下,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>
从上到下而不是从左到右排列元素( float :向下?)
最佳答案
我建议你这样使用 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>
关于javascript - 根据 Container 的高度垂直流动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51394333/