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:172227parcourir
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