css使多个相互之间有间隔的元素两端对齐显示

最新推荐文章于 2024-04-16 12:23:43 发布
最新推荐文章于 2024-04-16 12:23:43 发布
阅读量8.6k 收藏 8
点赞数 5
文章标签： css javascript 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011500781/article/details/77408015
版权

场景重现

这里写图片描述
电商网站经常会出现如下布局来展示商品图片，每行4个，每个和每个之间有20px的距离，两端对齐，假设总宽度为500px

效果列举

  • 失败效果
    这里写图片描述

  • 成功效果
    这里写图片描述

代码示例

方法一：width: 25%; margin-right: -20px;

说明：每个大的item宽度25%，那么4个正好排成一行，item里面的div右边距20px，最后设置最大的包裹div右边距-20px，使右边界对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    body, html {
        width: 100%;
        height: 100%;
    }
    .ctn {
        width: 500px;
        height: 300px;
        background: grey;
    }
    .hidden {
        overflow: hidden;
    }
    .item-ctn {
        margin-right: -20px;
        margin-bottom: -20px;
        background: blue;
    }
    .item-ctn:after {
        content: '';
        display: block;
        clear: both;
    }
    .item {
        float: left;
        width: 25%;
        height: 100px;
        margin-bottom: 20px;
    }
    .item-ctx {
        margin-right: 20px;
        height: 100%;
        background: red;
    }
  </style>
</head>
<body>
    <div class="ctn">
        <div class="hidden">
            <div class="item-ctn">
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
                <div class="item">
                    <div class="item-ctx">
                        <p>1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
方法二calc：width: calc((100% - 20px*3)/4); .item:nth-child(4n)

说明：使用css3新属性calc布局(注意不同浏览器的兼容前缀)
* 设置宽度

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .ctn {
    width: 500px;
    height: 300px;
    background: grey;
  }

  .hidden {
    overflow: hidden;
  }

  .item-ctn {
    margin-bottom: -20px;
    background: blue;
  }

  .item-ctn:after {
    content: '';
    display: block;
    clear: both;
  }

  .item {
    float: left;
    width: calc((100% - 20px*3)/4);
    margin-right: 20px;
    height: 100px;
    margin-bottom: 20px;
  }

  .item:nth-child(4n) {
    margin-right: 0;
  }

  .item-ctx {
    height: 100%;
    background: red;
  }
</style>
方法三flex：display: flex; justify-content: space-between;

说明：使用flex布局，子元素间隔且两端对齐即可(注意不同浏览器的兼容前缀)

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .ctn {
    width: 500px;
    height: 300px;
    background: grey;
  }

  .hidden {
    overflow: hidden;
  }

  .item-ctn {
    margin-bottom: -20px;
    background: blue;
    /* 弹性盒子 */
    display: flex;
    /* 沿行轴线两端对齐，子元素之间有间隙 */
    justify-content: space-between;
    /* 子元素溢出父容器时换行 */
    flex-flow: row wrap;
  }

  .item {
    width: 110px;
    height: 100px;
    margin-bottom: 20px;
  }

  .item-ctx {
    height: 100%;
    background: red;
  }
</style>
方法四grid：display: grid; justify-content: space-between;

说明：使用网格布局，子元素间隔且两端对齐即可(注意不同浏览器的兼容前缀)

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .ctn {
    width: 500px;
    height: 300px;
    background: grey;
  }

  .hidden {
    overflow: hidden;
  }

  .item-ctn {
    margin-bottom: -20px;
    background: blue;
    /* 网格布局 */
    display: grid;
    /* 定义网格的行和列 */
    grid-template: auto / 110px 110px 110px 110px;
    /* 沿行轴线两端对齐，子元素之间有间隙 */
    justify-content: space-between;
  }

  .item {
    width: 110px;
    height: 100px;
    margin-bottom: 20px;
  }

  .item-ctx {
    height: 100%;
    background: red;
  }
</style>
vcxiaohan2
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
详解css使既有浮动又有左右margin的多个元素两端对其
09-22
主要介绍了详解css使既有浮动又有左右margin的多个元素两端对其,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3实现多个元素依次显示效果
09-24
在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下
css设置三个div等间距平铺,CSS实现三列图片等宽等间距布局
weixin_42332123的博客
08-03 1799
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。每个图片块左浮动,宽30%,左外边距2.5%:100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%三列图片等宽布局* {margin: 0;padding: 0;}img {display: block;width: 30%;margin: 2.5% 0 0 2...
【CSS】flex布局平分三等分中间间距相等且两端对齐
热门推荐
向着光芒的女孩
05-29 3万+
思路： 通过display:flex,再将子元素设置flex:1,再包一层，通过设置padding来设置中间间距，可以达到想要多效果 padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2 完整代码如下： <!doctype html> <html&gt...
CSS选择器
qq_53987671的博客
09-13 435
一、选择器类型 1.标签选择器 标签名{属性:值} 对一类标签进行样式的设置 2.类选择器 .类名{属性:值} 对同一类名的标签进行设置，一个标签可以有多个类名。 3.id选择器 #id名{属性:值} id最好不要重复，因为后面dom要通过id获取节点。 4.后代选择器 选择器1 选择器2{属性:值} 表示对选择器1中的标签后代（不仅仅是直接子元素，也可以...
css nth-child()运用
assassin_0302的博客
04-13 172
如图，要做到每6个循环一次图标，那么解决方法如下如果要做每3个 、4个、5个 以此类推即可
css文字间距和文字对齐
qq_43351090的博客
09-04 379
css文字间距和文字对齐 css有letter-spacing属性，但有时仍难以对齐。 且在小程序中，&nbsp；无效 此处变通一下，如你需要将姓名和手机号对齐： <text>姓名</text> <text>手机号</text> 你只需要转变一下思维，在姓名里嵌套一个只有一个汉字的text标签，并将其设置为与背景色相同的颜色即可。 <text>姓<text style="color:white">我</text&gt
css如何实现文字两端对齐效果
weixin_49054076的博客
03-27 1万+
设置 text-align，并且设置伪元素 after或者 before的样式，伪元素中可以添加width:100%或padding-left:100%都可以实现我们所要的效果。想要实现文字两端对齐效果，可以使用CSS的text-align属性。数字和英文字母则需要使用空格间隔开，再使用上述两种方法之一，就可以实现文字两端对齐了！
html有4个li怎么选择第二个,CSS选择器怎么隔4个选中元素？
weixin_34902728的博客
06-03 3113
该方法适用于所有品牌的电脑。CSS选择器隔4行选中元素p:nth-child(5){background:#ff0000;}第1个段落。第2个段落。第3个段落。第4个段落。第5个段落。第6个段落。第7个段落。第8个段落。第9个段落。第10个段落。效果图：CSS3选择器nth-child(n)实现隔几行选择元素nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元...
css 使盒子之间有间距 两边对齐
Yangli_nn的博客
08-09 5433
大盒子： margin-left :-10px; margin-right : -10px； 小盒子设置边距： 1） padding-left: 10px; padding-right :10px; 2) margin-left: 10px; margin-right: 10px; <function> 固定宽度 <function-item> 不设置宽度 margin-left:-10px; margin-right:-
css将两个元素水平对齐的方法(兼容IE8)
09-22
主要介绍了css将两个元素水平对齐的方法(兼容IE8)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS columns实现两端对齐布局的示例代码
12-28
例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为： .container { columns: 3 30px; } 叮咚，结束了，game over~ 简单到令人发指。 不要怀疑，看一个实时渲染的例子吧： <div class=zhang></div>...
html中css对多个元素相同属性的设置问题
wordpython
02-23 1万+
！要用逗号隔开，如： .son1, .son2, .son3{ width:100px; height:100px; margin:5px; display:inline-block; /* 将块级元素转化为行内块元素*/ border:1px dashed black; } &lt;div class="son1"&gt;盒子1&lt;/div&gt; &lt;d...
笔记｜使用CSS选择器（复合选择器）
GUIDM的博客
04-15 862
1、复合选择器 组合使用不同的选择器可以匹配更特定的元素。 1.1、并集选择器 创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。 eg： ​<style type="text/css"> ​​a, [lang|="en"] {​​ border: thin black solid;​​ padding: 4px;​​ }​​ </style>​​ 指定了一个类型选择器a和一个属性选择器[lang｜='en']。 ⚠️可以根据自己...
css如何让图片均匀分布,css – 如何均匀分布元素在一个div相邻？
weixin_39834154的博客
08-03 1162
在“旧的日子”，你会使用一个表，你的菜单项将均匀分布，而不必显式地声明项目的数量的宽度。如果不是IE 6和7(如果这是关心的)，那么你可以在CSS中做同样的。Span 1Span 2Span 3CSS：div.demo {display: table;width: 100%;table-layout: fixed; /* For cells of equal size */}div.demo...
css 在容器内文字两端对齐，中间均分
NOyesNONO_的博客
03-01 665
css 在容器内文字两端对齐，中间均分
CSS选择器(4)
qq_43419887的博客
01-26 829
属性选择器
flex元素上下左右居中对齐
dearMengJJ的博客
07-01 3240
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ **d...
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-16 1405
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
css 实现两端对齐
03-19
CSS实现两端对齐可以使用以下两种方法： 1. 使用Flexbox布局： - 将父容器的`display`属性设置为`flex`，并且设置`justify-content`属性为`space-between`。 - 这样子元素会在父容器中均匀分布，并且第一个子元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值