<code id="ymukc"><xmp id="ymukc">

CSS實現三列圖片等寬等間距布局

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

 基本信息

× 1   

瀏覽數: 26689

分享時間: 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

您的評論:

  
六合特码资料
<code id="ymukc"><xmp id="ymukc">
<code id="ymukc"><xmp id="ymukc">