Maison > interface Web > tutoriel HTML > CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose

CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:55:25
original
1599 Les gens l'ont consulté


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





三列图片等宽布局




CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose
    



简单实用的 百分比布局 还是很适合手机WAP页面布局的:
min-width:320px;
max-width:420px;
width:100%;
overflow-x: hidden;
margin: 0 auto;
最小宽度320px,最大宽度420px,在320px和420px之间自动适应宽度,看起来还行.
CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%,就算是图片,在合理范围内,拉伸宽,影响也不大.
Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal