Div的不同大小不正確浮

如果我漂浮的：留下一堆是相同尺寸的div，它似乎運作良好，例如： divs properly floating Div的不同大小不正確浮

然而，如果申報單的一個是比其他人高，只有第一個div會浮在左邊，其餘的都被推到右邊。我可以通過增加例如divtwo的高度重現此：

div.divone{ 
    width:100px; 
    height:100px; 
    background-color: red; 
    border-style: solid; 
    border-color: blue; 
    float: left; 
} 

div.divtwo{ 
    width:100px; 
    height:250px; 
    background-color: green; 
    border-style: solid; 
    border-color: blue; 
    float: left; 
} 

<div class="divone">abc</div> 
<div class="divtwo">abc</div> 
<div class="divone">abc</div> 
<div class="divone">abc</div> 
<div class="divone">abc</div> 
<div class="divone">abc</div>

An image of the two examples side by side with an arrow pointing to where I'm expecting the divs to go

我應該怎麼做才能讓那些小的div正確適合的空白高大div的左邊？

來源

2016-09-16 Steve

聽起來像你正在尋找masonary類型的佈局。這是一篇很好的博客文章。

https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.64f1qm9a

來源

2016-09-16 02:31:21 bobsfishmarket

Taken from my answer here.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    break-inside: avoid-column; 
 
} 
 
#red { 
 
\t background-color: red; 
 
} 
 
#green { 
 
\t height: 250px; 
 
\t background-color: green; 
 
} 
 
#blue { 
 
\t background-color: blue; 
 
} 
 
#yellow { 
 
\t background-color: yellow; 
 
} 
 
#orange { 
 
\t background-color: orange; 
 
} 
 
body { 
 
    width: 300px; 
 
    columns: 3; 
 
}

<body> 
 
\t <div id="red"></div> 
 
    <div id="yellow"></div> 
 
\t <div id="green"></div> 
 
\t <div id="blue"></div> 
 
    <div id="orange"></div> 
 
</body>

您可以使用CSS列，很容易達到這種效果。

來源

2016-09-16 02:38:12 StardustGogeta

Div的不同大小不正確浮

回答

相關問題