请教一个移动端 css 的样式问题

2020-01-03 16:05:26 +08:00
 zzlit

像这样子 375px 的布局，黑色是菜单 100px，然后天蓝色是两边的等距 20px，剩下中间就是 235px 了，有一些 70px 的分类，一行放三个，中间黑色箭头的距离 25px 该怎么等分呢，一三俩个贴边，二居中？会有动态加载即肯定不止一行的情况，求大佬指点！

4459 次点击
所在节点    JavaScript
45 条回复
Austaras
2020-01-03 17:02:29 +08:00
2200 年了，不如直接 grid，只要设 column-gap 就好了
ccyu220
2020-01-03 17:06:50 +08:00
@Austaras 知道为什么 grid 不在正式项目用的原因吗。。。
zzlit
2020-01-03 17:08:31 +08:00
@Austaras 我这边需要贴两边然后中间的居中，我尝试过 grid，没有实现想要的效果
howell5
2020-01-03 17:14:21 +08:00
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
</body>


.main
display flex
width 235px
height 500px
flex-wrap wrap
border 1px solid black
.box
width 70px
height 70px
margin-right 12.5px
&:nth-of-type(3n)
margin-right 0
redam
2020-01-03 17:17:08 +08:00
这样？



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.side-bar {
float: left;
width: 100px;
height: 100%;
background: #000;
}
.list {
box-sizing: border-box;
margin-left: 100px;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
.item-wrap {
float: left;
width: calc(100% / 3);
text-align: center;
}
.item {
display: inline-block;
width: 70px;
height: 70px;
background: red;
}
</style>
</head>
<body>
<div class="side-bar"></div>
<div class="list">
<div class="item-wrap">
<div class="item"></div>
</div>
<div class="item-wrap">
<div class="item"></div>
</div>
<div class="item-wrap">
<div class="item"></div>
</div>
<div class="item-wrap">
<div class="item"></div>
</div>
</div>
</body>
</html>
howell5
2020-01-03 17:19:13 +08:00
@howell5 思路：首先容器增加 flex-wrap wrap，然后 item 中为 3 的倍数的 margin-right 置 0, 需要注意的是如果 item 有 padding/border 等属性，还需要增加 box-sizing: border-box 阻止 item 膨胀
redam
2020-01-03 17:20:22 +08:00
@redam emmm,还得加上
.item {vertical-align:middle}
zzlit
2020-01-03 17:23:02 +08:00
@redam 感谢解答，已找到答案，不过这个 demo 里面 item 外面的 item-wrap 没有贴合两边的导致留白了
zzlit
2020-01-03 17:24:55 +08:00
@howell5 移动端 0.5px 不行的
redam
2020-01-03 17:25:39 +08:00
@zzlit 呃呃，没看清题目，加个这个好了
.item-wrap:nth-child(3n-2) {
text-align: left;
}
.item-wrap:nth-child(3n) {
text-align: right;
}
justyeh
2020-01-03 17:29:30 +08:00
这篇博客不错

[让 CSS flex 布局最后一行列表左对齐的 N 种方法]( https://www.zhangxinxu.com/study/201908/flex-last-align-demo.php)
zzlit
2020-01-03 17:32:55 +08:00
@redam 也行！
@justyeh 非常感谢！
hyy1995
2020-01-03 18:30:49 +08:00
用 nth 选择器就行，你去百度下这玩意的用法，这种布局分分钟随便写。。。。
huguotai
2020-01-03 18:33:14 +08:00
直接用 flex 布局啊~~~
Austaras
2020-01-03 19:11:30 +08:00
@ccyu220 移动端一般都没有兼容性问题
Austaras
2020-01-03 19:12:32 +08:00
@zzlit 你这不是写了都是 70px 吗，都可以算出来的啊
wangyzj
2020-01-03 19:51:20 +08:00
@daquandiao2 正解啊
otakustay
2020-01-03 20:03:18 +08:00
flex 应该搞不定这事，最后一行只有 1 个或 2 个的话会布局有问题，直接用 grid 会好一些
jason94
2020-01-03 23:22:18 +08:00
flex 解决不了，楼上说的 margin 有时候还是会存在有 bug。
最终的解决办法是 grid
userdhf
2020-01-03 23:44:54 +08:00
用 grid 啊。。。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/634807

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX