search

zhaobinglong / myBlog

https://zhaobinglong.github.io/myBlog/
MIT License
7 stars 0 forks source link

web常用布局模板 #30

Open zhaobinglong opened 4 years ago

zhaobinglong commented 4 years ago

瀑布流布局

// 根据索引来判断，这个方案不完美
<div wx:if="{{ index/2==0 }}"></div>
<div wx:if="{{ index/2!=0 }}"></div>
zhaobinglong commented 4 years ago

吸低布局

<body>
<div class="content"></div>
<footer></footer>
</body>

#body{
    display: flex;
    flex-direction: column;
    min-height:100vh;  /* 最小高度同样为屏幕高度 */
}
.content {
    flex:1;
}
footer {
    padding: 10px;
}
zhaobinglong commented 3 years ago

九宫格布局

参考

https://h5ui.io/