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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
You might like
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python基于百度云文字识别API
2018/12/13 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python爬取内容存入Excel实例
2019/02/20 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
年度考核评语
2014/01/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
婚庆司仪开场白
2015/05/29 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
数据库连接池
2021/04/06 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers