CSS 布局技巧实现元素左右排列的方法
我要评论开发中经常会遇到一个场景，使用 CSS 实现一个子元素靠右，其余子元素靠左。
这里总结一下常见的实现方式。
1. flex 布局
flexbox 是一种常用且灵活的布局方式，适合完成这种需求。将父容器设置为 display: flex，然后使用 margin-left: auto 将特定的子元素推到右边，左边也是同样的。
举个 🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 500px;
padding: 10px;
background-color: #ffe2bd;
border-radius: 8px;
/* 主要代码 */
display: flex;
}
.item {
width: 100px;
height: 100px;
text-align: center;
background-color: #ffc75f;
border-radius: 8px;
}
.left {
margin-right: 10px;
}
.right {
margin-left: auto; /* 将这个子元素推到右边 */
}
</style>
</head>
<body>
<div class="container">
<div class="item left">左边元素1</div>
<div class="item left">左边元素2</div>
<div class="item right">右边元素</div>
</div>
</body>
</html>展示为：
同理：如果想让某一个子元素靠左排列，那父容器设置 display: flex，该元素设置 margin-right: auto。
原理：
1、display: flex 将父容器变为弹性盒模型容器，子元素变为弹性盒项目（flex items），弹性盒模型自动处理子元素的排列，使它们默认水平排列。
2、使用 margin-left: auto 可以将某个子元素推到容器的最右边，原因是 auto 会自动填充元素左侧的剩余空间，这会将该子元素向右移动到容器的右边界。
3、margin-right: auto 同理，将某个子元素推到容器的最左边。
2. grid 布局
CSS grid 也是一种强大的布局工具，可以指定某个子元素在网格布局的某个区域中显示。父容器设置：display: grid; grid-template-columns: auto auto 1fr; 靠右元素设置：justify-self: end; 即可。
举个 🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 500px;
padding: 10px;
background-color: #fdcedd;
border-radius: 8px;
/* 主要代码 */
display: grid;
grid-template-columns: auto auto 1fr; /* 左边两个元素自动宽度，右边占据剩余空间 */
}
.item {
width: 100px;
height: 100px;
background-color: #ff889c;
text-align: center;
border-radius: 8px;
}
.left {
margin-right: 10px;
}
.right {
justify-self: end; /* 将这个子元素推到右边 */
}
</style>
</head>
<body>
<div class="container">
<div class="item left">左边元素1</div>
<div class="item left">左边元素2</div>
<div class="item right">右边元素</div>
</div>
</body>
</html>展示为：
同理，实现某一个元素靠左排列，父容器设置：display: grid; grid-template-columns: 1fr auto auto; 靠左元素设置：justify-self: start; 即可。
原理：
1、display: grid 将父容器转换为网格容器（grid container），grid-template-columns 定义了网格的列数及其宽度。在该 🌰 中，前两列的宽度是自动的（根据内容的大小调整），第三列占据容器剩余的空间（通过 1fr 实现，它表示剩余空间的1倍份额）。
2、justify-self: end 指将指定的子元素在单元格内水平向右对齐。
3、justify-self: start; 指将指定的子元素在单元格内水平向左对齐。
3. 使用 float
float 是较早期的一种布局方式，尽管现在使用的比较少，但有时仍然有效。只需要在靠左元素上添加 float: left，靠右元素上添加：float: right 即可实现。
举个 🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 500px;
background-color: #def8b7;
border-radius: 8px;
padding: 10px;
}
/* 注意：清除浮动 */
.container::after {
content: '';
display: block;
clear: both;
}
.item {
width: 100px;
height: 100px;
background-color: #ace753;
text-align: center;
border-radius: 8px;
}
.left {
float: left;
margin-right: 10px;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="item left">左边元素1</div>
<div class="item left">左边元素2</div>
<div class="item right">右边元素</div>
</div>
</body>
</html>展示为：
float 是一种较早的布局方式，它最初用于图文混排，但后来被用于实现左右分布的布局。
原理：
1、float: left 会使元素向容器的左边浮动，并让后续的元素绕过它。如果多个元素都设置了 float: left，它们会依次排列在容器的左边。float: right 将元素向右浮动，与左边元素相对。
2、使用 clear 可以防止浮动元素影响后续的非浮动元素。通常，这种布局方式需要考虑清除浮动以避免布局崩溃。
注意📢：float 不太适合这种布局，维护起来不如 flex 和 grid 简单。
4. 使用 position: absolute
当父元素为 relative，可以将右边的子元素设置为 absolute 定位。
举个 🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 500px;
padding: 10px;
background-color: #9af5ff;
border-radius: 8px;
/* 主要代码 */
position: relative; /* 定义父容器为相对定位 */
/* height: 100px; */
}
.item {
width: 100px;
height: 100px;
text-align: center;
background-color: #23e9ff;
border-radius: 8px;
}
.left1 {
position: absolute;
left: 10px;
top: 10px;
}
.left2 {
position: absolute;
top: 10px;
left: 120px;
}
.right {
position: absolute;
right: 10px; /* 将右边元素推到右边 */
top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item left1">左边元素1</div>
<div class="item left2">左边元素2</div>
<div class="item right">右边元素</div>
</div>
</body>
</html>该方法需要给每一个元素设置位置，并且父元素的高度需要处理，比较麻烦。
不设置高度展示为：
设置高度展示为：
position 属性允许我们对元素进行更精确的定位，absolute 定位相对于离它最近的 reactive 定位的父元素或文档流进行偏移。
原理：
1、父元素使用 position: relative， 它成为 absolute 子元素的定位参考。position: absolute 的子元素完全脱离文档流，不会影响其他元素的排列。
2、设置 right 可以将该子元素定位到父容器的右边界。因为该元素是 absolute 定位的，所以它在布局上不会与其他子元素产生冲突。
注意📢：使用 position: absolute 需要小心，因为它会将元素从正常的文档流中移除，可能会对页面的响应性和布局结构产生影响。
5. 总结
1、Flex（推荐）：适合处理单行或单列的布局，具有自动对齐和分布功能，适合响应式设计。
2、Grid：适合处理复杂的二维布局，提供了行和列的控制，非常灵活。
3、Float：早期的布局方法，现在主要用于图文混排和较简单的布局，已经逐渐被其他方法取代。
4、Absolute：适用于需要精确定位的场景，但需要避免影响其他元素的布局。
到此这篇关于CSS 布局技巧实现元素左右排列的文章就介绍到这了,更多相关css元素左右排列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋友跟随小编一起看看吧2025-06-20- 本文给大家讲解CSS 的三种核心布局机制——普通流(Normal Flow)、浮动(Float)和定位(Positioning)对于创建灵活、响应式的网页至关重要,本文将深入探讨这三种机制的工作原2025-06-19
文章介绍如何用CSS实现角标效果,通过.active类结合::after和::before伪元素,利用定位、边框和旋转创建红色边框与白色三角形的提示标志,适用于按钮或卡片元素的视觉增强设计2025-06-19CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)
CSS Anchor Positioning是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持需启用实验 flag,它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比
CSS 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关系,以下是 static、relative、absolute、fixed、sticky 的详细对比和应用2025-06-17CSS place-items: center解析与用法详解
place-items: center; 是一个强大的 CSS 简写属性，用于同时控制 网格(Grid) 和 弹性盒(Flexbox) 布局中的对齐方式，本文给大家介绍CSS place-items: center； 详解与用法2025-06-17
在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧2025-06-17- CSS单位区别与使用场景总结：px绝对、vw/vh响应式,%继承父尺寸,em/rem文字缩放,vmin/vmax适应宽高变化,固定布局用px或%,响应式布局用vw/vh/rem,文字用em或rem，本文给大家2025-06-16
- 这篇文章主要介绍了CSS 样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2025-05-21
- 在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具，本文介绍CSS基础中padding，通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元2025-05-16
最新评论