学习笔记——弹性布局实现二行四列等分布局

在开发过程中,有时会让你将多张图片以2X2或3X3的形式摆放。这里要求任意相邻的两张图片上下和左右之间的间隙相同。


一.padding-top/margin-top,padding-bottom/margin-bottom

1.代码 :

<div class="page-container">
    <div class="layout-wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
    </div>
</div>
* { padding: 0; margin: 0; }
.page-container {
    width: 100%;
    height: 100vw;
    background-color: #F5F5F5;
}
.layout-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item {
    flex-shrink: 0;
    width: 24.1%;
    height: 200px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
.item.margin { margin-top: 1.2%; }

2.效果图:

3.要点:

当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时,计算结果是参照父元素的宽度。

这里主要使用了以上知识。

 二.网格布局

1.代码 :

<div class="page-container">
    <div class="layout-wrapper">
        <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>
* { padding: 0; margin: 0; }
.page-container {
    width: 100%;
    height: 100vw;
    background-color: #F5F5F5;
}
.layout-wrapper {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 200px 200px;
    grid-gap: 12px;
}
.item {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}

 2.效果图:

3.要点:

网格布局能够简单地实现许多复杂地页面布局。非常实用


在网页编辑中,这种效果比较常用。当然,还可以使用其他方法实现相同效果。

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一一GG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值