So implementieren Sie das Wasserfall-Flow-Layout in CSS

So implementieren Sie das Wasserfall-Flow-Layout mit CSS: 1. Verwenden Sie ein mehrspaltiges Mehrspalten-Layout. 2. Verwenden Sie dazu das Flex-Layout. Stellen Sie einfach die äußere Ebene auf das Zeilenlayout ein, richten Sie dann einen Container ein und stellen Sie ihn auf das Spaltenlayout ein. Er behandelt die Spalte als Ganzes, teilt die Spalte und legt die Breite fest Spalte.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Layout des Wasserfallflusses ist immer noch sehr attraktiv. Ich habe es kürzlich gesehen. Insbesondere finde ich die Implementierung des Wasserfallflusses im Flex-Layout etwas verwirrend, aber jetzt kann ich es verstehen Das ist das Prinzip

1. Mehrspaltiges Mehrspalten-Layout implementiert den Wasserfallfluss

Besprechen Sie zunächst kurz einige Eigenschaften im Zusammenhang mit Mehrspalten

• column-count legt die Anzahl der Spalten fest
• column-gap legt Spalten und Spalten fest. Der Abstand zwischen
• column-width legt die Breite jeder Spalte fest

Auch kombiniert mit der Einstellung „break-inside“ im untergeordneten Container, um unerwartete Umbrüche in mehrspaltigen Layouts, paginierten Medien und Kontexten mit mehreren Regionen zu verhindern

break-inside属性值
  auto  指定既不强制也不禁止元素内的页/列中断。
  avoid  指定避免元素内的分页符。
  avoid-page  指定避免元素内的分页符。
  avoid-column 指定避免元素内的列中断。
  avoid-region  指定避免元素内的区域中断。

• Abgefangener Teil, Sie können ihn selbst füllen

/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
    <div class="item">
        <img class="itemImg" src="../images/1.jpeg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/2.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/3.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/4.jpg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg" src="../images/5.jpeg" alt=""/>
        <div class="userInfo">
            <img class="avatar" src="../images/gift.png" alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
</div>

/* css样式 */
body {
    background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
     margin: 0 auto;
     width: 1200px;
     column-count: 5;
     column-width: 240px;
     column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
     margin-bottom: 10px;
     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
     break-inside: avoid;
     background: #fff;
}
.item:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
     width: 100%;
     vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
     padding: 5px 10px;
}
.avatar {
     vertical-align: middle;
     width: 30px;
     height: 30px;
     border-radius: 50%;
}
.username {
     margin-left: 5px;
     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

2.Flex-Layout implementiert Wasserfallfluss

• Stellen Sie die äußere Ebene auf Zeilenlayout ein, legen Sie dann einen Container fest und stellen Sie ihn auf ein Spaltenlayout, bei dem die Spalte als Ganzes verwendet wird, und dann die Spalten geteilt und die Breite in den Spalten festgelegt werden, um dies zu erreichen Die Verwendung von js zur Implementierung des Wasserfallflusses entspricht eher unserem gemeinsamen Wasserfallfluss

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Wasserfall-Flow-Layout in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!