Heim > Web-Frontend > CSS-Tutorial > Teilen von Bild- und Textcode, um eine beidseitige Ausrichtung in CSS3 zu erreichen

Teilen von Bild- und Textcode, um eine beidseitige Ausrichtung in CSS3 zu erreichen

黄舟
Freigeben: 2017-07-19 16:00:17
Original
2233 Leute haben es durchsucht

Methode 1: Verwenden Sie die Justify-Implementierung von Box-Pack: Verwenden Sie das Display: Flex Elastic Box-Modell, um die adaptive Breite entsprechend der Fenstergröße zu implementieren. Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Der Effekt ist wie folgt:

Methode 2: Spalte verwenden Mehrspaltiges Layout zur Implementierung, insbesondere Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Der Effekt ist wie folgt:






Das obige ist der detaillierte Inhalt vonTeilen von Bild- und Textcode, um eine beidseitige Ausrichtung in CSS3 zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage