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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
javascript数据类型详解
2017/02/07 Javascript
js date 格式化
2017/02/15 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python3 爬取图片的实例代码
2018/11/06 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
敬老院标语
2014/06/27 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers