communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

CSS实现三列图片等宽等间距布局

大家讲道理
Libérer： 2016-11-09 17:13:07
original
2041 Les gens l'ont consulté

14576749621.png

每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
 <title>三列图片等宽布局</title>
 <style>
 * {
     margin: 0;
     padding: 0;
 }
 img {
     display: block;
     width: 30%;
     margin: 2.5% 0 0 2.5%;
     float: left;
 }
 </style>
 </head>
 <body>
 <div>
 <img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" >
 <img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" >
 <img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" ><img  src="byd.jpg" / alt="CSS实现三列图片等宽等间距布局" >
 </div>    
 </body>
 </html>
Copier après la connexion

简单实用的百分比布局 还是很适合手机WAP页面布局的:

min-width:320px;
 max-width:420px;
 width:100%;
 overflow-x: hidden;
 margin: 0 auto;
Copier après la connexion

最小宽度320px,最大宽度420px,在320px和420px之间自动适应宽度,看起来还行.
在CSS实现三列图片等宽等间距布局标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%.

Étiquettes associées：
代码片段，代码分享，PHP代码分享，Java代码分享 Ruby代码分享，Python代码分享，HTML代码分享，CSS代
source：php.cn
Article précédent：微信H5的开头css部分 Article suivant：CSS3实现的动画效果下拉导航菜单效果
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Regrouper les résultats MySQL par ID pour effectuer une boucle J'ai une table avec des données de vol dans MySQL. J'écris un code php qui regroupera et a...
Depuis 2024-04-06 17:27:56
0
1
406
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Comment savoir quand un composant Vue est complètement initialisé ? Ainsi, dans mon composant Vue, j'ai une méthode créée de manière asynchrone et plusieurs v...
Depuis 2024-04-05 14:20:24
0
1
1442
Le titre reformulé est : La traduction anglaise des frais fractionnés d'abonnement Stripe Connect est "Frais fractionnés d'abonnement Stripe Connect". Bonjour, je construis une plate-forme pour les clients utilisant StripePHPAPI qui vend des...
Depuis 2024-04-02 20:15:22
0
1
418
Comment aligner les images en utilisant la grille CSS ? J'essaie de créer une partie d'un site Web en utilisant une grille CSS. J'essaie de faire ...
Depuis 2024-04-01 22:08:31
0
1
338
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal