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

usib8630的头像 usib8630 0 2016-03-05 20:39 1

 基本信息

× 1   

浏览数: 25300

分享时间: 2 年 前

5


每个图片块左浮动,宽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" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
</div>    
</body>
</html>



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

min-width:320px;
max-width:420px;
width:100%;
overflow-x: hidden;
margin: 0 auto;


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


12 [下一页]

  • cixexey的头像 cixexey 2018-06-22 23:11 代码数:0

    Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

    עיצוב גרפי

  • cixexey的头像 cixexey 2018-06-24 18:39 代码数:0

    Excellent information on your blog, thank you for taking the time to share with us. Amazing insight you have on this, it's nice to find a website that details so much information about different artists.Kredit Widerruf

  • luomo1991的头像 luomo1991 2016-05-20 20:24 代码数:0

    只靠视频是学不会HTML5的,这个需要学习当中有实际的操作才能学会,只看视频是学不会的哦,自学是需要很强的毅力和耐心的,在自学中遇到困难的时候,没人帮你解决问题,这方面的问题我们的课程就能避免这些事情,而且我们的课程是免费的,我给大家推荐一个大神前端学习QUN前面一部分数字为四其一,中间一段数字是0儿七,后面一部分是一武4,想学习的人可以加群一起学习下,不想学习的就不用加了。

  • cixexey的头像 cixexey 2018-06-27 18:57 代码数:0

    I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.Brownstone Law

  • cixexey的头像 cixexey 2018-06-30 16:39 代码数:0

    I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.coin dogs crypto game

  • cixexey的头像 cixexey 2018-06-30 19:18 代码数:0

    Hi! Thanks for the great information you have provided! You have touched on crucuial points!

    acim

  • cixexey的头像 cixexey 2018-07-01 22:09 代码数:0

    The post is written in very a good manner and it contains many useful information for me.

    acim

  • cixexey的头像 cixexey 2018-07-02 16:01 代码数:0

    I just found this blog and have high hopes for it to continue. Keep up the great work, its hard to find good ones. I have added to my favorites. Thank You. acim

  • cixexey的头像 cixexey 2018-07-06 05:53 代码数:0

    Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.

    new condo launch

  • cixexey的头像 cixexey 2018-07-06 19:49 代码数:0

    I am hoping the same best effort from you in the future as well. In fact your creative writing skills has inspired me.Brazilian plastic surgeon

您的评论: