极客观点
项目管理
HarmonyOS
HTML 代码 (假设父容器可以嵌套无数个同级的item, 父容器高度自适应就行)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="rxc-wrapper bg-primary text-white p-3">
<div class="rxc-container bg-success p-3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>CSS 代码
.item {
width: 25%;
height: 100px;
border: 1px solid;
}
.rxc-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}需求描述
除了flex以外可以使用其他布局方式, 能实现效果就行
根据定义item宽度百分比
25%和间距1rem, 需要实现每行均分- 如果宽度是
25%每行显示4个item - 如果宽度是
50%每行显示5个item - 以此类推, 但是间距永远保持1rem
- 如果宽度是
遇到的问题
如果算上间距 + 宽度, 会溢出, 也就是说, 在 4 个 item 25% 宽加上 1rem 间距, 一行不可能显示4个, 所以需要把间距减掉在算宽度
以下是目前的效果
期望的得道的效果
图中有点问题, 最下面间距应该为1rem, 但我代码里没有实现
代码如下, 我这边在内部嵌套了一个div, 再用 :nth-child 才能实现类似的需求
然后项问一下有没有什么其他更好的实现方法?
HTML
<div class="rxc-wrapper bg-primary text-white p-3">
<div class="rxc-container bg-success p-3">
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
</div>
</div>CSS
.box {
width: 100%;
height: 100px;
border: 1px solid;
}
.item {
width: 25%;
margin-bottom: 1rem;
}
.rxc-container {
display: flex;
flex-wrap: wrap;
}
.item:nth-child(4n) {
padding-left: .5rem !important;
}
.item:nth-child(4n-1),
.item:nth-child(4n-2) {
padding-left: .5rem !important;
padding-right: .5rem !important;
}
.item:nth-child(4n-3) {
padding-right: .5rem !important;
}
用 calc 去计算就好了，你要有间隙，那 item 肯定就不能是绝对的宽度，宽度应该由：
<单个 item 宽度> = (<外部盒子宽度> - <间隙>) / <单行数量>如下面这个例子，假设这些位置的大小都是
1rem那 item 的宽度就可以设置成width: calc((100% - 1rem * 5) / 4)，并且再给上margin-left: 1rem。当然，一般情况下，外部盒子内部的边距，我们可以用 padding 来填充一下。
简单调整一下 CSS
当然，如果使用 grid 的话，会更简单