成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端兩端對(duì)齊 + 圖片寬度自適應(yīng)

JerryC / 2675人閱讀

摘要：自適應(yīng)四宮格有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為，中間間距為，每一行的兩張圖是等寬的即平分去掉間距后的寬度有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。

自適應(yīng)四宮格

有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度）

有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。這個(gè)布局不太好寫的主要原因是，在寬度上，百分比（50%）與實(shí)際尺寸（4px 10px）混雜，所以做到寬度自適應(yīng)的話會(huì)有困難。

下面是正經(jīng)的一種寫法：

圖片單元float，寬度設(shè)置為50%，奇數(shù)單元設(shè)置margin-right為10px, 偶數(shù)單元設(shè)置margin-right為-10px。父元素設(shè)置左padding為4px，右padding為14px，父元素的padding值正好是所有間距的總和，所以它實(shí)際寬度的50%是正好符合需求的圖片單元寬度。偶數(shù)單元的負(fù)margin（-10px）和父元素右padding（14px）會(huì)中和成4px的右邊距（實(shí)際上是因?yàn)樵刎?fù)margin會(huì)使其右邊的元素向左移動(dòng)并被其覆蓋）

運(yùn)營(yíng)的同學(xué)在實(shí)際操作中，做的圖可能不會(huì)很標(biāo)準(zhǔn)，所以我們需要做一些簡(jiǎn)單地容錯(cuò)，即是圖片垂直居中在圖片單元內(nèi)，圖片單元設(shè)置padding-top為一個(gè)百分比，這個(gè)百分比為設(shè)計(jì)稿中圖片的寬高比。這樣即使圖片有些誤差也不會(huì)影響總體的排版布局，垂直居中的原理是 top 百分比的基數(shù)是父元素 translate百分比的基數(shù)是元素本身。

實(shí)際代碼如下


    

        

    

   

        

    

    

        

    

    

        

    


.four-item-list{
    overflow: hidden;
    padding: 4px 14px 0 4px;
    .item{
      width: 50%;
      margin: 0 10px 18px 0;
      float: left;
      &:nth-child(even){
        margin-right: -10px;
      }
    }
    .img-bar{
      padding-top: 71%;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    .img{
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
 }
自適應(yīng)六宮格

有了上面四宮格的經(jīng)驗(yàn)，類似的這種六宮格布局動(dòng)動(dòng)腦子也很容易寫

代碼如下

  

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

  
  .six-item-list{
    overflow: hidden;
    padding: 4px 14px 0 4px;
    .item{
      width: 33.3%;
      margin: 0 5px 18px 0;
      float: left;
      &:nth-child(3n+0){
        margin-right: -10px;
      }
    }
    .img-bar{
      padding-top: 100%;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    .img{
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
}
demo

歡迎大家到墨瞳漫畫h5官網(wǎng)查看源碼（請(qǐng)用響應(yīng)式模式打開） 墨瞳漫畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111931.html

相關(guān)文章

  • 移動(dòng)端兩端對(duì)齊 + 圖片寬度自適應(yīng)

    摘要：自適應(yīng)四宮格有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為，中間間距為，每一行的兩張圖是等寬的即平分去掉間距后的寬度有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。 自適應(yīng)四宮格 有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度） showImg(http://www.ganother.com/images/four-it...

    atinosun 評(píng)論0 收藏0

  • margin詳解

    摘要：屬性指定了盒的區(qū)的寬度。簡(jiǎn)寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡(jiǎn)寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會(huì)產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒(méi)有設(shè)定...

    stonezhu 評(píng)論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評(píng)論0 收藏0

  • css樣式

    摘要：注意換行默認(rèn)值上對(duì)齊下對(duì)齊垂直居中文本基線對(duì)齊設(shè)置所有的其他去除蘋果點(diǎn)擊事件的灰色陰影有些元素需要設(shè)置背景色。 居中 布局中居中是很重要的技術(shù)，掌握居中的技巧，對(duì)布局相當(dāng)重要 /* flex 垂直 居中 */ *{ margin: 0; padding: 0; } .container{ height: 100...

    cppprimer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<