CSS 标签左右分布的多种方法

最新推荐文章于 2024-05-07 12:23:02 发布

今天代码敲了吗

最新推荐文章于 2024-05-07 12:23:02 发布

阅读量4.6k

点赞数 3

分类专栏： CSS 文章标签： css css3 flex

本文链接：https://blog.csdn.net/z772330927/article/details/106099452

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS 标签左右发布的多种方法

第一种用flex布局（推荐）
第二种浮动（不推荐）
第三种position定位（不推荐）
总结

第一种用flex布局（推荐）

改变justify-content样式属性有不同的发布，有兴趣的可以试试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

<style>
.flexs{
  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布局，用了之后感觉这种更快捷更能显示出效果。当然这是凭个人喜好而定的。
最后附上一个看flex的网址

今天代码敲了吗

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS 标签左右分布的多种方法

CSS 标签左右发布的多种方法第一种用flex布局（推荐）第二种浮动（不推荐）第三种position定位（不推荐）总结第一种用flex布局（推荐）改变justify-content样式属性有不同的发布，有兴趣的可以试试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title><style>.flexs{ display:
复制链接

扫一扫