简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

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

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

黄舟
黄舟original
2017-07-19 16:00:172210parcourir

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>

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de comment aligner les deux extrémités du texte d'un paragraphe à l'aide du style CSSArticle suivant：Exemple de comment aligner les deux extrémités du texte d'un paragraphe à l'aide du style CSS

Articles Liés

Voir plus