CSS Flex布局堆叠的问题
最近在玩小程序，使用Flxe布局时，各个view的宽度是一致的，但高度不一致，这样同一行的两个view高度不同时，会留空。我不希望它留空，而是全部堆叠起来，不留空，要怎么实现，谢谢。
<!--pages/test/test.wxml-->
<view class="viewContent">
<view class="viewA">A</view>
<view class="viewB">B</view>
<view class="viewC">C</view>
<view class="viewD">D</view>
<view class="viewE">E</view>
</view>
/* pages/test/test.wxss */
.viewContent{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.viewA{
background-color: aqua;
width: 50%;
height: 100px;
}
.viewB{
background-color: blue;
width: 50%;
height: 80px;
}
.viewC{
background-color: coral;
width: 50%;
height:90px;
}
.viewD{
background-color: darkorange;
width: 50%;
height: 120px;
}
.viewE{
background-color: gray;
width: 50%;
height: 100px;
}
查了一下资料，Grid 网格布局（http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）应该是可以解决这个问题，但研究了一番，还是没有搞掂，还请各位大哥指教一下。
实现瀑布流？？ 参考css3 columns属性，实现瀑布流
你对块元素的理解不到位 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;}
.pool {column-count: 2;width: 100%;column-width: auto;font-size: 0;column-gap: 6px;}
.pool > div {background-color: pink;width: 100%;border: 1px solid red;box-sizing: border-box;
display: inline-block;margin-bottom: 6px;}
.h1 {height: 100px;}
.h2 {height: 80px;}
.h3 {height: 50px;}
</style>
</head>
<body>
<div id="app">
<div class="pool">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
<div class="h2"></div>
<div class="h1"></div>
</div>
</div>
</body>
</html> notproblem 发表于 2020-6-3 08:53
谢谢，评分送大哥
页:
[1]