CSS实现多个元素在盒子内两端对齐效果


Posted in HTML / CSS onMarch 30, 2021

元素俩端对齐的排列布局在实际的开发当中随处可见,使用flex布局的--justify-content : space-between即可轻松实现,但有些场景下需要考虑兼容等问题,不得不放弃flex布局,所以我们想要实现同样的效果就需要研究排版,在网络搜索了一番答案后,发现真正简单且实质性能够解决问题的,寥寥无几,确实我在实际项目中经常碰到此类布局,所以我利用业余时间,将其原理实现分享于此,以供交流,分享

场景要求

在一个确定宽度的盒子内,将item俩端对齐排列,且不影响确定盒子的原来布局。

<div class="container">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

假设这里我们有这么些item

* {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 1200px;
        height: 500px;
        background-color: aqua;
        margin: 0 auto;
    }
    
    ul {
        /* 关键是元素的宽,通过margin负值移位与container重叠 */
        width: 1220px;
        margin-left: -20px;
        list-style: none;
    }
    
    ul li {
        float: left;
        /* width = (盒子宽度 - margin间距 * 一行items的个数 - 1) /  一行item的个数 */
        /* (1200px - 20 * 2) / 3 */
        width: 386.666px;
        height: 60px;
        margin: 0px 0 20px 20px;
        background-color: red;
    }

css关键在于需要我们计算下item的宽度,/* width = (盒子宽度 - margin间距 * 一行items的个数 - 1) /  一行item的个数 */ ,这里我打算一行显示三个item,那么就是(1200px - 20 * 2) / 3,为什么是一行item的个数-1来计算marign占据的宽度,三个item不应该是三个margin吗,这就是实现俩端对齐的精髓所在,试想浮动布局,一行元素在流上逐个排列,当流方向宽度不够时,元素则会折行排列,如果想让齐在一行内显示,我们确实可以通过给第三个item的margin值设置为0,使其不折行也达到了俩端对齐的显示方式,这样做确实没问题,可一旦item个数多了,且不确定的时候呢,你怎么取消一行内最后一个item的margin,显然设置margin为0的方式不是最佳方案,那么此时就可以对他的外包盒子做处理,外部盒子ul(这里我使用的是ul标签,块标签都可以)的宽度和 -margin值的设置。

为什么外部盒子的宽度是1220px

CSS实现多个元素在盒子内两端对齐效果

这是container原来的宽度

CSS实现多个元素在盒子内两端对齐效果

这是ul的宽度,是的已经大过了container,而且是右边大过去的,那此时将ul用-margin处理后,即可成为视觉上的俩端对齐

取消ul的背景颜色后,效果达成

总结

到此这篇关于CSS实现多个元素在盒子内两端对齐效果的文章就介绍到这了,更多相关CSS 元素 盒子 两端对齐内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
You might like
利用PHP实现短域名互转
2013/07/05 PHP
Yii配置文件用法详解
2014/12/04 PHP
php限制ip地址范围的方法
2015/03/31 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
pycharm运行scrapy过程图解
2019/11/22 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python用户自定义异常的实现
2020/12/25 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
2014年学校党建工作总结
2014/11/11 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
网聊搭讪开场白
2015/05/28 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Python 使用dict实现switch的操作
2021/04/07 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏