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圆角边框和边框阴影示例
May 05 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
You might like
pdo中使用参数化查询sql
2011/08/11 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
django框架forms组件用法实例详解
2019/12/10 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
C#面试题问题集
2016/04/02 面试题
红领巾广播站广播稿
2014/02/01 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
乐山大佛导游词
2015/02/02 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
MySQL系列之十二 备份与恢复
2021/07/02 MySQL