V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zzlit
V2EX  ›  JavaScript

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

  •  
  •   zzlit · 2020-01-03 16:05:26 +08:00 · 4389 次点击
    这是一个创建于 1546 天前的主题,其中的信息可能已经有所发展或是发生改变。

    像这样子 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 用得多。
    45 条回复    2020-01-06 14:41:51 +08:00
    daquandiao2
        1
    daquandiao2  
       2020-01-03 16:08:57 +08:00
    display flex
    justify-content space-between
    toacnme
        2
    toacnme  
       2020-01-03 16:12:06 +08:00
    问后端的话就是 flex 一把梭
    liyang5945
        3
    liyang5945  
       2020-01-03 16:12:59 +08:00
    flex 布局完事,父容器设置 justify-content 为 space-between 或 space-around
    yafoo
        4
    yafoo  
       2020-01-03 16:15:44 +08:00
    flex 吧,最好的布局方式
    zzlit
        5
    zzlit  
    OP
       2020-01-03 16:18:44 +08:00
    怎么不能 append ?忘记说了,最好能只用 css 来解决,用 flex 的 space-between 话,第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。
    @daquandiao2 @liyang5945 @toacnme @yafoo
    f056917
        6
    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
        7
    f056917  
       2020-01-03 16:23:41 +08:00
    .box {
    width: 70px;
    }
    maruize321
        8
    maruize321  
       2020-01-03 16:32:40 +08:00
    flex 随便搞
    myEzekiel
        9
    myEzekiel  
       2020-01-03 16:36:05 +08:00
    基本都 flex
    SakuraKuma
        10
    SakuraKuma  
       2020-01-03 16:40:40 +08:00   ❤️ 1
    最后一行问题,搭配 nth-child:last-child 就好了
    例如你现在的是 70px:
    .item:nth-child(3n-1):last-child {
    margin-right: calc(100% - 140px - (100% - 210px) / 2)
    }
    maruize321
        11
    maruize321  
       2020-01-03 16:42:08 +08:00
    为什么剩下 235px 不是 335 ?
    vivipure
        12
    vivipure  
       2020-01-03 16:42:29 +08:00   ❤️ 3
    多行不确定项时,不要使用 justify-content: space-between; 直接默认 flex-start,宽度取百分比,对中间元素取 margin.用
    div {
    width: 30%;
    }
    div:nth-child(3n+2) {
    margin: 0 5%;
    }
    maruize321
        13
    maruize321  
       2020-01-03 16:43:16 +08:00
    打扰了
    yeept
        14
    yeept  
       2020-01-03 16:44:35 +08:00
    最后一行问题可以使用 ::after 伪元素选择器可以解决吧
    rabbbit
        15
    rabbbit  
       2020-01-03 16:47:08 +08:00
    LyleRockkk
        16
    LyleRockkk  
       2020-01-03 16:47:35 +08:00
    10L 和 12L 方法都可行,12L 可能写起来更简单一点,无需计算。 但是 使用 flex 的时候,注意要设置 box-sizing: border-box;
    shintendo
        17
    shintendo  
       2020-01-03 16:51:13 +08:00
    margin-left: 12.5px
    KuroNekoFan
        18
    KuroNekoFan  
       2020-01-03 16:51:29 +08:00
    10L 的挺好
    ccyu220
        19
    ccyu220  
       2020-01-03 16:59:40 +08:00
    最简单的办法

    div{
    width: 32%;
    }

    div:not(:first-child){
    margin-left: 2%;
    }
    hoshizukiko
        20
    hoshizukiko  
       2020-01-03 17:02:14 +08:00
    我一般是用六楼的方法。
    10l 12l 的学到了
    Austaras
        21
    Austaras  
       2020-01-03 17:02:29 +08:00
    2200 年了,不如直接 grid,只要设 column-gap 就好了
    ccyu220
        22
    ccyu220  
       2020-01-03 17:06:50 +08:00
    @Austaras 知道为什么 grid 不在正式项目用的原因吗。。。
    zzlit
        23
    zzlit  
    OP
       2020-01-03 17:08:31 +08:00
    @Austaras 我这边需要贴两边然后中间的居中,我尝试过 grid,没有实现想要的效果
    howell5
        24
    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
        25
    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
        26
    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
        27
    redam  
       2020-01-03 17:20:22 +08:00
    @redam emmm,还得加上
    .item {vertical-align:middle}
    zzlit
        28
    zzlit  
    OP
       2020-01-03 17:23:02 +08:00
    @redam 感谢解答,已找到答案,不过这个 demo 里面 item 外面的 item-wrap 没有贴合两边的导致留白了
    zzlit
        29
    zzlit  
    OP
       2020-01-03 17:24:55 +08:00
    @howell5 移动端 0.5px 不行的
    redam
        30
    redam  
       2020-01-03 17:25:39 +08:00   ❤️ 1
    @zzlit 呃呃,没看清题目,加个这个好了
    .item-wrap:nth-child(3n-2) {
    text-align: left;
    }
    .item-wrap:nth-child(3n) {
    text-align: right;
    }
    justyeh
        31
    justyeh  
       2020-01-03 17:29:30 +08:00   ❤️ 2
    这篇博客不错

    [让 CSS flex 布局最后一行列表左对齐的 N 种方法]( https://www.zhangxinxu.com/study/201908/flex-last-align-demo.php)
    zzlit
        32
    zzlit  
    OP
       2020-01-03 17:32:55 +08:00
    @redam 也行!
    @justyeh 非常感谢!
    hyy1995
        33
    hyy1995  
       2020-01-03 18:30:49 +08:00
    用 nth 选择器就行,你去百度下这玩意的用法,这种布局分分钟随便写。。。。
    huguotai
        34
    huguotai  
       2020-01-03 18:33:14 +08:00
    直接用 flex 布局啊~~~
    Austaras
        35
    Austaras  
       2020-01-03 19:11:30 +08:00
    @ccyu220 移动端一般都没有兼容性问题
    Austaras
        36
    Austaras  
       2020-01-03 19:12:32 +08:00
    @zzlit 你这不是写了都是 70px 吗,都可以算出来的啊
    wangyzj
        37
    wangyzj  
       2020-01-03 19:51:20 +08:00
    @daquandiao2 正解啊
    otakustay
        38
    otakustay  
       2020-01-03 20:03:18 +08:00
    flex 应该搞不定这事,最后一行只有 1 个或 2 个的话会布局有问题,直接用 grid 会好一些
    jason94
        39
    jason94  
       2020-01-03 23:22:18 +08:00
    flex 解决不了,楼上说的 margin 有时候还是会存在有 bug。
    最终的解决办法是 grid
    userdhf
        40
    userdhf  
       2020-01-03 23:44:54 +08:00
    用 grid 啊。。。
    darknoll
        41
    darknoll  
       2020-01-04 00:25:38 +08:00 via Android
    咋不用 12 栅格布局
    Allianzcortex
        42
    Allianzcortex  
       2020-01-04 10:40:43 +08:00 via iPhone
    需求是多行两端对齐尾行左对齐,grid 的 repeat +++1
    imdoge
        43
    imdoge  
       2020-01-04 15:02:14 +08:00
    如果不用 flex 的话,传统方法 grid 布局的思想
    容器左右两端给一个负的 margin,然后每一个块的宽度是 100%/个数,每一个有一个 padding,左右正好是容器的负 margin,这样就正好左右两个贴边,中间的均匀分布了
    MiracleKagari
        44
    MiracleKagari  
       2020-01-04 22:59:28 +08:00 via Android
    item inline-block,nth-child( 3n-1),设置每行中间那个 item margin:0 12.5px;即可
    akakidz
        45
    akakidz  
       2020-01-06 14:41:51 +08:00
    @justyeh 这篇文章太棒了! css 鬼才
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5389 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 07:33 · PVG 15:33 · LAX 00:33 · JFK 03:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.