Partage de code d'image et de texte pour obtenir un alignement des deux côtés en CSS3-tutoriel CSS-php.cn

Partage de code d'image et de texte pour obtenir un alignement des deux côtés en CSS3

黄舟

Libérer： 2017-07-19 16:00:17

original

2267 Les gens l'ont consulté

Méthode 1 : Utiliser l'implémentation de justification de box-pack : Utilisez le modèle display: flex elastic box pour implémenter une largeur adaptative en fonction de la taille de la fenêtre. Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Méthode 2 : Utiliser la colonne disposition multi-colonnes à implémenter, spécifiquement Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!