国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端兩端對齊 + 圖片寬度自適應

atinosun / 3453人閱讀

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

自適應四宮格

有這樣一張設計稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度）

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

下面是正經的一種寫法：

圖片單元float，寬度設置為50%，奇數單元設置margin-right為10px, 偶數單元設置margin-right為-10px。父元素設置左padding為4px，右padding為14px，父元素的padding值正好是所有間距的總和，所以它實際寬度的50%是正好符合需求的圖片單元寬度。偶數單元的負margin（-10px）和父元素右padding（14px）會中和成4px的右邊距（實際上是因為元素負margin會使其右邊的元素向左移動并被其覆蓋）

運營的同學在實際操作中，做的圖可能不會很標準，所以我們需要做一些簡單地容錯，即是圖片垂直居中在圖片單元內，圖片單元設置padding-top為一個百分比，這個百分比為設計稿中圖片的寬高比。這樣即使圖片有些誤差也不會影響總體的排版布局，垂直居中的原理是 top 百分比的基數是父元素 translate百分比的基數是元素本身。

實際代碼如下


    

        

    

   

        

    

    

        

    

    

        

    


.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%;
    }
 }
自適應六宮格

有了上面四宮格的經驗，類似的這種六宮格布局動動腦子也很容易寫

代碼如下

  

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

  
  .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官網查看源碼（請用響應式模式打開） 墨瞳漫畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50707.html

相關文章

  • 移動端兩端對齊 + 圖片寬度自適應

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

    JerryC 評論0 收藏0

  • margin詳解

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

    stonezhu 評論0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • css樣式

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

    cppprimer 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<