CSS3에서 양쪽 끝 정렬을 달성하기 위해 이미지 및 텍스트 코드 공유-CSS 튜토리얼-php.cn

CSS3에서 양쪽 끝 정렬을 달성하기 위해 이미지 및 텍스트 코드 공유

黄舟

풀어 주다： 2017-07-19 16:00:17

원래의

2166명이 탐색했습니다.

방법 1: box-pack의 justify 구현 사용: 디스플레이: 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>

로그인 후 복사

효과는 다음과 같습니다.

방법 2: 열 다중 열 레이아웃을 사용하여 구현합니다. 구체적인 코드는 다음과 같습니다.

<!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>

로그인 후 복사

효과는 다음과 같습니다: