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 clip-path 用法介绍详解
Mar 01 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
You might like
ip签名探针
2006/10/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python实现学生信息管理系统
2020/04/05 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
极简的HTML5模版
2015/07/09 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
大学生党课心得体会
2016/01/07 职场文书