CSS3中实现两端对齐的图文代码分享

2020-11-27 来源：欧得旅游网

方法一：使用box-pack的justify实现：使用display：flex弹性盒子模型实现根据窗口大小自适应宽度。代码如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.container{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: 30px;
	 -webkit-box-pack: justify;
	 -webkit-justify-content: space-between;
	 -ms-flex-pack:justify ;
	 justify-content: space-between;
	}
	 .container a{
	 	width:20%;
	 	display: block;
	 	height: 50px;
	 	line-height: 45px;
	 	text-align: center;
	 	border 1px solid red;
	 	color: sandybrown;
	 	font-size: 16px;
	 	margin-bottom: 5px;
	 	border-radius: 3px;
	 	background-color: skyblue;
	 text-decoration: none;
	 }	
	</style>
	</head>
	<body>
	<p class="container">
	<a class="link" href="#">10</a>
	<a class="link" href="#">20</a>
	<a class="link" href="#">30</a>
	<a class="link" href="#">50</a>
	
	</p>
	</body>
</html>

效果如下：

方法二：使用column多列布局实现，具体代码如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
	<title></title>
	<style>
	*{margin: 0;padding: 0;}
	 .container{
	 	-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
	 	-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;
	 	 	margin-top: 100px;
	 }
	 .container a{
	 	
	 	display: block;
	 	height: 50px;
	 
	 	line-height: 50px;
	 	text-align: center;
	 	border: 1px solid sandybrown;
	 	color: #0066CC;
	 	font-size: 16px;
	 	margin-bottom: 5px;
	 	border-radius: 4px;
	 	background-color: salmon;
	 	text-decoration: none;
	 }
	</style>
	</head>
	<body>
	 <p class="container">
	 <a class="link" href="#none">10元</a>
 <a class="link" href="#none">20元</a>
 <a class="link" href="#none">30元</a>
 <a class="link" href="#none">50元</a>
	 </p>
	</body>
</html>

效果如下：

显示全文

全部栏目

CSS3中实现两端对齐的图文代码分享