场景介绍
<!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>
.parent {
display: flex;
background-color: red;
padding: 0 200px;
}
</style>
</head>
<body>
<!-- 在下面的代码中,我想实现1在左边,2和3在右边,该如何实现呢? -->
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
实现方式:
给2所在的div设置左外边距为auto即可, margin-left: auto;
将 margin-left
设为 auto
后, 元素左边的 margin
会被尽可能的撑大, 所以自然就把元素挤到右边去了
最终效果
最终代码:
<!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>
.parent {
display: flex;
background-color: red;
padding: 0 200px;
}
.right {
margin-left: auto;
}
</style>
</head>
<body>
<!-- 在下面的代码中,我想实现1在左边,2和3在右边,该如何实现呢? -->
<div class="parent">
<div>1</div>
<div class="right">2</div>
<div>3</div>
</div>
</body>
</html>