首頁 > web前端 > css教學 > 主體

CSS3中實現兩端對齊的圖文代碼分享

黄舟
發布: 2017-07-19 16:00:17
原創
2188 人瀏覽過

方法一:使用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中實現兩端對齊的圖文代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!