美文网首页
自己搞的css简单瀑布流

自己搞的css简单瀑布流

作者: 在下高姓 | 来源:发表于2020-05-28 10:52 被阅读0次
<style>
.id{
    width: 100vw;
    justify-content: center;
    height: auto;
    overflow: hidden;
    column-count: 2;
    column-gap:5px;

}
.id>div{
    width:100%;
    height: auto;
    display: inline-block;//注意设置为块级行内元素
}
</style>
<div class="id">
   <div style="height: 150px;background-color: green">1</div>
    <div style="height: 120px;background-color: #ff5e67">2</div>
    <div style="height: 150px;background-color: #b1809d">3</div>
    <div style="height: 160px;background-color: #636a80">4</div>
    <div style="height: 170px;background-color: #d6c171">5</div>
    <div style="height:160px;background-color: #18c9dd">6</div>
    <div style="height: 140px;background-color: #ff4e58">7</div>
    <div style="height: 230px;background-color: #e9fd4f">8</div>
    <div style="height: 120px;background-color: #83fd85">9</div>
    <div style="height: 90px;background-color: #35fdf2">10</div>
    <div style="height: 110px;background-color: #9e24fd">11</div>
    <div style="height: 200px;background-color: #fd7f27">12</div>
    <div style="height: 180px;background-color: #fd279a">13</div>


image.png

相关文章

网友评论

      本文标题:自己搞的css简单瀑布流

      本文链接:https://www.haomeiwen.com/subject/fgeoahtx.html