成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

JerryC / 2730人閱讀

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

自適應(yīng)四宮格

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

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

下面是正經(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）會中和成4px的右邊距（實(shí)際上是因?yàn)樵刎?fù)margin會使其右邊的元素向左移動并被其覆蓋）

運(yùn)營的同學(xué)在實(shí)際操作中，做的圖可能不會很標(biāo)準(zhǔn)，所以我們需要做一些簡單地容錯，即是圖片垂直居中在圖片單元內(nèi)，圖片單元設(shè)置padding-top為一個百分比，這個百分比為設(shè)計(jì)稿中圖片的寬高比。這樣即使圖片有些誤差也不會影響總體的排版布局，垂直居中的原理是 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)，類似的這種六宮格布局動動腦子也很容易寫

代碼如下

  

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

  
  .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)查看源碼（請用響應(yīng)式模式打開） 墨瞳漫畫

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111931.html

相關(guān)文章

  • 移動端兩端對齊 + 圖片寬度自適應(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 評論0 收藏0

  • margin詳解

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

    stonezhu 評論0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • css樣式

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

    cppprimer 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<