CSS标签左右分布的多种⽅法CSS 标签左右发布的多种⽅法
第⼀种⽤flex布局（推荐）
改变justify-content样式属性有不同的发布，有兴趣的可以试试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flexs{
cssclass属性
display: flex;
justify-content: space-between;
align-items: center;
} </style>
</head>
<body>
<div class="flexs">
<div >左边</div>
<div>右边</div>
</div>
</body>
</html>
效果图
第⼆种浮动（不推荐）
如果左右标签的宽⾼不同可能不会是⽔平分布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.divleft{
float:left
}
.divright{
float:right}
</style>
</head>
<body>
<div class="flexs">
<div  class="divleft">左边</div>
<div  class="divright">右边</div>
</div>
</body>
</html>
效果图
第三种position定位（不推荐）
浮动在不同的浏览器和页⾯⼤⼩中效果的是不同的，⽽且如果左右标签的宽⾼不同可能不会是⽔平分布，还得慢慢的调整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.divleft{
position:relative
}
.divright{
position: relative;
top: -22px;
left: 95%;
}
</style>
</head>
<body>
<div class="flexs">
<div  class="divleft">左边</div>
<div  class="divright">右边</div>
</div>
</body>
</html>
效果图
总结
本⼈⼀开始⽤的是flot浮动的⽅法来就⾏左右分布，后来发现有position的⽅法，可是这两种都不能让
标签完美的⽔平分布，⽔平居中，还得⽤left,top,margin-left.margin-top来调整，代码过多，后来发现了flex布局，⽤了之后感觉这种更快捷更能显⽰出效果。当然这是凭个⼈喜好⽽定的。