一行中有3个div，并且要使div分别向左、居中、向右对齐

在这里插入图片描述
首先第一种方法是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一行里面有3个div，怎么做到左边和右边中间对齐</title>
    <style>
        .content {
            overflow: hidden;  /*清除浮动*/
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #000;
            float: left;
        }

        .box2 {
            width: 600px;
            height: 200px;
            background-color: #342;
            margin: 0 auto;
            position: relative;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: #098;
            float: right;
        }
        /*利用的原理就是左边和右边进行浮动，然后中间给出你想要的宽高，然后使用margin：0 auto进行居中，因为左右浮动后就不会占用文档流了。但是一定要注意放置的位置，中间的一块要放在左右的后面才可以*/
    </style>
</head>

<body>
    <div class="content">
        <div class="box1">左边</div>
        <div class="box3">右边</div>
        <div class="box2">中间</div>

    </div>
</body>

</html>

第二种方法是：
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
那我们怎么使用flex去写呢？
只需要在父级给display: flex; justify-content: space-between;这两个即可

<div class="header">
		<div class="header-left">
			<img src="./img/logo2.png">
		</div>
		<div class="header-center">
			<img src="./img/header.jpg">
		</div>
		<div class="header-right">
			<ul>
				<li>
					<a href="#">登录</a>
				</li>
				<li>
					<a href="#">注册</a>
				</li>
				<li>
					<a href="#">购物车</a>
				</li>
			</ul>
		</div>
	</div>

.header{
	width: 100%;
	height: 84px;
	display: flex; 
	justify-content: space-between;
}
.header-left{
	width: 140px;
	height: 62px;
	padding-top: 11px;
}
.header-left img{
	width: 100%;
	height: 100%;
}
ul{
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
.header-right>ul>li{
	float: left;
	margin-right: 20px;
	line-height: 84px;

}

这样做出来的结果就是比较完美的，就算你是缩小屏幕你的布局也不会乱

当然了上面的 space-between并不是只有一个， space-between表示的使中间两头对齐，中间居中对齐，justify-content：后面一共可以跟6中属性，就是下面图中的。
注意：使用flex之后就不要在使用float，因为float已经没有效果了
在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_43758938/article/details/100667061