CSS 中最后一行中元素如何向左对齐
自从CSS 3.0出来以后,很多的页面布局都用弹性布来实现,特别是移动端,但是弹性布局也有它的弊端,就是最后一行如果数量不够,不会像我们正常的想法一样居左对齐。效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.list {display: flex;justify-content: space-between;flex-wrap: wrap;}.item {width: 24%;height: 100px;background-color: blue;margin-bottom: 15px;}</style>
</head>
<body><div class="list"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>
1. 每行列数是固定的
如果每一行的列的数量是固定的,却列的宽度一样,比如每一行均为4个,宽度均为24%,则可以用两种方法来解决这个问题。
1. 弹性布局,但是不用弹性布局的对齐方式,中间的间隙通过计算得来。
.list {display: flex;flex-wrap: wrap
}
.item {width: 24%;height: 100px;background-color: blue;margin-bottom: 15px;
}
/* 非第4列的右边距 */
.item:not(:nth-child(4n)) {margin-right: calc(4% / 3);
}
2. 弹性布局,两边对齐,最后一列有2个或是3个时,通过动态计算右边距来解决左对齐问题。
.list {display: flex;flex-wrap: wrap;justify-content: space-between;
}
.item {width: 24%;height: 100px;background-color: blue;margin-bottom: 15px;
}
/* 如果最后一行是3个元素 */
.item:last-child:nth-child(4n - 1) {margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.item:last-child:nth-child(4n - 2) {margin-right: calc(48% + 8% / 3);
}
2. 子元素宽度不固定
如果每一个子元素宽度不固定,那最后一行如何实现左对齐呢,有以下两种方法。
1. 弹性布局,两边对齐,最后一个元素的右边距设置为自动。
.list {display: flex;justify-content: space-between;flex-wrap:wrap;
}.item {background-color: blue;margin: 10px;height:100px;
}.item:last-child {margin-right: auto;
}
2. 弹性布局,两边对齐,给外层容器添加一个伪元素,伪元素设置 flex:auto 或 flex:1。
.list {display: flex;justify-content: space-between;flex-wrap: wrap;
}
.list::after {content: '';flex: auto;
}
.item {background-color: blue;margin: 10px;height: 100px;
}
3. 每行列数不固定
如果每一行列数不固定,那最后一行如何实现左对齐呢,有以下两种方法。
1. 使用足够的空白标签进行填充占位,具体的占位数量是由最多列数的个数决定的,一行最多几列,就用几个空白标签。占位的元素的 width 和 margin 设置得和子元素一样即可,其他样式都不需要写。由于占位元素高度为0,因此,并不会影响垂直方向上的布局呈现。
这种方法是使用最广的一种方法,如果有代码洁癖,请忽略。
<style>.list {display: flex;justify-content: space-between;flex-wrap: wrap;}.item {width: 100px;height: 100px;background-color: blue;margin-bottom:10px;margin-right:10px;}.list>i {width: 100px;margin-right: 10px;}
</style><div class="list"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
2. 使用格子布局,有天然的间隙和对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。
<style>.list {display: grid;justify-content: space-between;grid-template-columns: repeat(auto-fill, 100px);grid-gap: 10px;}.item {width: 100px; height:100px;background-color: blue;}
</style>
格子布局需然很爽,但是 repeat() 函数有一定兼容性要求,在IE浏览器上不支持。
CSS 中最后一行中元素如何向左对齐相关推荐
- Word中对一行/页眉同时设置左对齐和右对齐
在撰写学位论文的时候,可能需要对页眉上的文字同时设置左对齐和右对齐,如下图所示: 具体实现步骤: Step 1: 先正常输入内容**学校学位论文摘要,并在视图中打开标尺(可以显示出我们设置的制表符位置 ...
- 纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- css 多行文字左对齐,纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- 在Excel中选取一行中的最大数值进行标题匹配
Excel中需要操作的数据如下: 实现的效果如下: 操作需求:每一行数据对应每一个标题都有相应的标题得分,但是只选择得分最大的标题作为这一行的标题. 第一步:首先在I2单元格中输入Max函数查找出一行 ...
- 在flex布局中,一行中的最后一个元素靠最右边放
Flex 中使用 justify-content, 规定项目之间的对其方法,如果要让最后一项向右边对齐,如下图: 有一个简单的方法,在最后一项元素使用样式: margin-left: auto;
- python怎样显示表格数据匹配_Python根据表中每一行中的数据匹配txt文章中出现的次数,表格,每行,在,统计...
用途: 根据表格每行数据,匹配在txt文章中出现的次数统计 示例: 注意事项: 1. 环境:pip install re & pandas & xlrd; python 3; 2. 表 ...
- python文件替换一行_python自动化替换文件中每一行中的特有字符串
在工作中,有可能有一些场景,例如我要替换我txt文档中,所有行中包含test文字的的行内容,例如我们可以替换为空,或者某一个特定字符串呢?不多说,上代码.. def repalceString(): ...
- CSS让同一行的图片和文字垂直居中对齐
有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢 很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:mid ...
- html div居中左对齐,div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐 使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇) 实 ...
最新文章
- 复习计算机网络day2
- SharePoint 2007 系列(12) SharePoint Master Page
- 华为擎云w510_苹果 iPhone 12 全家桶谍照曝光;华为台式机擎云W510现身官网
- C# ie通过打印控件点打印,总是弹出另存为xps的对话框
- 2016年印度公有云服务市场将达13亿美元
- 使用Elastic APM监控你的.NET Core应用
- 重学java基础第二十二课:IDEA安装
- oracle删除唯一索引sql语句_高级SQL之在选择语句中使用更新和删除
- Java基于stanford-corenlp实现英文词形还原
- 摩托罗拉edge S30冠军版再次开售:512GB超大存储 1GB不到5元钱!
- C# list 多条件排序
- activiti 文档_Activiti快速入门 kft-activiti-demo
- 如何解决Mac上隐藏红色通知标记?技巧来啦
- router单页面多个标签tags的用法router-view/router-view
- DedeCMS5.5 调用当前内容页TAG标记的办法
- iOS 自动化——技术方案、环境配置
- 长春技师学院计算机专业,中专院校 / 中专技校 / 长春市技师学院
- java地理位置的获取_Java 根据 IP 获取地理位置
- 一个简单的跑酷引擎-------bibibibi
- 微信小程序自定义组件——手写radio