Home > Web Front-end > HTML Tutorial > CSS实现三列图片等宽等间距布局_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-21 08:55:25
Original
1597 people have browsed it


每个图片块左浮动,宽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%,就算是图片,在合理范围内,拉伸宽,影响也不大.
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template