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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1810 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2020-01-03 16:40:50 +08:00

谢谢大佬们解答。对于动态加载的 flex 布局，如果第二行只有两条的话，就会两端对齐了，然后就需要手动去 js 里面操作把这个 list 加一项，让第二行补充为三个才会样式正常。但是现在我想问的是有没有只从单纯的 css 来实现，不要出现 .5px 的情况，移动端。。。

第 2 条附言 · 2020-01-03 16:57:43 +08:00

感谢大家的解答，10L 和 12L 是我所需要的，再次感谢！

第 3 条附言 · 2020-01-04 11:52:49 +08:00

看到 grid 布局的这么多，平时我用的少所以想问一下，这里想要的是在 20padding 的基础上两端对齐，然后一三需要贴合 padding，二居中，那不是还需要选择器来判断一三 text-align:left or right，二：text-align: center 吗？这样的话和 10L 大佬的方法在最后一个去算 margin-right 我觉得好像都差不多，而且对于 grid 在移动端的坑其实我也不太懂，平时主要还是 flex 用得多。

一行

等分

CSS

居中

45 条回复 • 2020-01-06 14:41:51 +08:00

daquandiao2

2020-01-03 16:08:57 +08:00

display flex
justify-content space-between

toacnme

2020-01-03 16:12:06 +08:00

问后端的话就是 flex 一把梭

liyang5945

2020-01-03 16:12:59 +08:00

flex 布局完事，父容器设置 justify-content 为 space-between 或 space-around

yafoo

2020-01-03 16:15:44 +08:00

flex 吧，最好的布局方式

zzlit

2020-01-03 16:18:44 +08:00

怎么不能 append ？忘记说了，最好能只用 css 来解决，用 flex 的 space-between 话，第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。
@daquandiao2 @liyang5945 @toacnme @yafoo

f056917

2020-01-03 16:22:38 +08:00

<div class="main">
<div class="main-left"></div>
<div class="main-right">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>

.main {
display: flex;
}
.main-left {
width: 100px;
}
.main-right {
flex: 1;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

f056917

2020-01-03 16:23:41 +08:00

.box {
width: 70px;
}

maruize321

2020-01-03 16:32:40 +08:00

flex 随便搞

myEzekiel

2020-01-03 16:36:05 +08:00

基本都 flex

SakuraKuma

2020-01-03 16:40:40 +08:00

最后一行问题，搭配 nth-child:last-child 就好了
例如你现在的是 70px:
.item:nth-child(3n-1):last-child {
margin-right: calc(100% - 140px - (100% - 210px) / 2)
}

maruize321

2020-01-03 16:42:08 +08:00

为什么剩下 235px 不是 335 ？

vivipure

2020-01-03 16:42:29 +08:00

多行不确定项时，不要使用 justify-content: space-between; 直接默认 flex-start,宽度取百分比，对中间元素取 margin.用
div {
width: 30%;
}
div:nth-child(3n+2) {
margin: 0 5%;
}

maruize321

2020-01-03 16:43:16 +08:00

打扰了

yeept

2020-01-03 16:44:35 +08:00

最后一行问题可以使用 ::after 伪元素选择器可以解决吧

rabbbit

2020-01-03 16:47:08 +08:00

LyleRockkk

2020-01-03 16:47:35 +08:00

10L 和 12L 方法都可行，12L 可能写起来更简单一点，无需计算。但是使用 flex 的时候，注意要设置 box-sizing: border-box;

shintendo

2020-01-03 16:51:13 +08:00

margin-left: 12.5px

KuroNekoFan

2020-01-03 16:51:29 +08:00

10L 的挺好

ccyu220

2020-01-03 16:59:40 +08:00

最简单的办法

div{
width: 32%;
}

div:not(:first-child){
margin-left: 2%;
}

hoshizukiko

2020-01-03 17:02:14 +08:00

我一般是用六楼的方法。
10l 12l 的学到了

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 不行的