img-div塌陷

HTML+CSS基础布局 专栏收录该内容
14 篇文章 0 订阅

问题1:描述,如下面图片显示的结果,当图片大小高度不一的时候,就会出现如图所示的问题:

问题2:当容器高度依靠内容撑开,并且需要做到自适应宽高的时候,解决方法可以巧用margin/padding的百分比实现高度自适应,达到占位,避免避免闪烁;

例如下面:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .container {
    width: 1200px;
    margin: 0 auto;
    background-color: aquamarine;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    
  }

  .cell {
    width: 23.5%;
    margin-right: 2%;
    background-color: red;
    margin-bottom: 20px;
  }

  .cell:nth-of-type(4n) {
    margin-right: 0;
  }

  .cell .images {
    width: 100%;
    background-color: blue;
  }

  .cell .images .test_images {
    width: 100%;
    position: relative;
    padding-top: 100%;
    overflow: hidden;
  }

  .cell .images .test_images .img_wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .cell .images img {
    width: 100%;
    height: auto;
  }

  .blogs p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <!-- 
    描述上面图片
   -->

  <div class="container">
    <div class="row">
      <div class="cell">
        <div class="images">
          <div class="test_images">
            <div class="img_wrap">
              <img src="http://www.qpoint.hk/wp-content/uploads/2018/11/QPoint_coupons_Offer_Japan_Image_20181029175418_0_LKF_Street_Carnival_1.jpg">
            </div>
          </div>
        </div>
        <div class="blogs">
          <h2>蘭桂坊日本嘉年華</h2>
          <p>喜歡日本的人就像上了癮,無時無刻都想念日本。想要止止日本癮的朋友,11月可到以Cool Japan為主題的「蘭桂坊日本嘉年華」。承接往年的成功經驗,一連兩天的標誌性蘭桂坊街頭祭典將展示日本文化最華麗的一面,包括日式當地美餚、飲品以及多姿多彩的娛樂表演。嘉年華提供浴衣,讓你可以和閨密一邊穿浴衣,一邊品嘗甜點如青森縣的蘋果批、北海道氣球牛乳布甸、日式佳餚如A5和牛等多款美食,讓你全程投入充滿趣味的日本文化展覽和活動之中! 今日小編還會介紹蘭桂坊一些人氣日本餐廳的限時Q優點折扣讓你盡興而歸! 蘭桂坊日本秋祭市集 著浴衣歎A5和牛 蘭桂坊日本秋祭嘉年華為期兩天,屆時將會提供浴衣,讓一眾閨密們可以即場更換浴衣。另外,蘭桂坊日本秋祭嘉年華設40個攤位,攤位有刺激的互動遊戲,亦有來自日本各地的日式清酒和佳餚! Monchhichi期間限定店舖 由11月8日至11 月11日期間,蘭桂坊將聯同日本水果批發商兼官方授權甜品生產商山下菓子,精心呈獻新鮮水果市場和Monchhichi期間限定店舖。蘭桂坊首次聯乘山下菓子打造的第一個在港島區的限定店,印有Monchhichi圖案的日本著名美食如布丁、卷蛋及果汁將於活動期間內供應,定必俘虜一眾Monchhichi粉絲的歡心。參加者亦可在場內購買香港原創、於日本歌唱出道的卡通人物歌手—星星兔 (Sing Sing Rabbit)的精品系列。 LKF Cool …</p>
        </div>
      </div>
      <div class="cell">
        <div class="images">
          <div class="test_images">
            <div class="img_wrap">
              <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/正在消失的香港文化t1.png">
            </div>
          </div>
        </div>
        <div class="blogs">
          <h2>8個正在消失的香港文化</h2>
          <p>在這個快速變動的時代,舊的傳統漸趨式微,到底有什麼樣的香港傳統文化正慢慢淡出大眾的視線?  1️⃣ 大排檔 富人情味的傳統用餐方式由於衛生的問題,已經隨著營業牌照的限制,減少到只剩20多家!  2️⃣ 點心車 現今大多數的茶樓皆把過去用推車仔點菜的環節換成用點心紙,保有點心車傳統的茶樓已寥寥無幾。  3️⃣ 炒栗子 在冬天推著推車,在路邊叫賣的炒栗子攤販,已經成為過去,溫暖的景象已經被熙攘的人群所取代。  4️⃣ 冰室 代表香港市井文化的仿西式咖啡廳,在80年代起慢慢演變成步調快速的茶餐廳,專售簡單小食與飲品的悠閒好去處不復存在。  5️⃣ 士多 每一家士多陳設,玩意皆異,是屬於70,80年代生的童年回憶,如今已經被連鎖便利商店給取代。  6️⃣ 唐樓 無升降機的舊樓,隨著人口激增,居住空間往高處發展,漸漸被併購,重建,現多已淪為街舖的貨倉。</p>
        </div>
      </div>
      <div class="cell">
        <div class="images">
          <div class="test_images">
            <div class="img_wrap">
              <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
            </div>
          </div>
        </div>
        <div class="blogs">
          <h2>饮食须知</h2>
          <p>香港作为美食之都,有带三个胃都吃不够的佳餚!在出门准备去名店朝圣,大吃特吃之前,有什麽是需要注意的呢?  ?秘诀1:自备环保袋 自2015年4月起,为了响应环保,店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币  ?秘诀2:自备餐巾纸 多数的餐厅不提供餐巾纸,若有使用餐巾纸的需要,记得自备一包。  ?秘诀3:自备冷水 多数的餐厅呈上的是温热的开水,若需要加冰块,尚须额外加钱。  ?秘诀4:需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间,侍应不会主动前来点餐,因此需要任何服务,记得要主动开口  ?秘诀 5:备好现金 并非每家餐馆皆受信用卡,尤其是小摊贩,多备现金在身上以备不时之需  ?秘诀6:注意有没有额外收费 有些餐听主动送上的茶,调味酱料或小菜会额外收费,若不需要须先告知侍应。  ?秘诀7: 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点,每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。  ?秘诀8:茶水先用茶水来洗餐具 热茶在拿来喝前,可先用来清洗餐具,洗过餐具的水直接倒入桌上大碗中即可。  ?秘诀9:去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障,就参考优质旅游服务协会认证过的餐厅吧!</p>
        </div>
      </div>
      <div class="cell">
        <div class="images">
          <div class="test_images">
            <div class="img_wrap">
              <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
            </div>
          </div>
        </div>
        <div class="blogs">
          <h2>饮食须知</h2>
          <p>香港作为美食之都,有带三个胃都吃不够的佳餚!在出门准备去名店朝圣,大吃特吃之前,有什麽是需要注意的呢?  ?秘诀1:自备环保袋 自2015年4月起,为了响应环保,店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币  ?秘诀2:自备餐巾纸 多数的餐厅不提供餐巾纸,若有使用餐巾纸的需要,记得自备一包。  ?秘诀3:自备冷水 多数的餐厅呈上的是温热的开水,若需要加冰块,尚须额外加钱。  ?秘诀4:需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间,侍应不会主动前来点餐,因此需要任何服务,记得要主动开口  ?秘诀 5:备好现金 并非每家餐馆皆受信用卡,尤其是小摊贩,多备现金在身上以备不时之需  ?秘诀6:注意有没有额外收费 有些餐听主动送上的茶,调味酱料或小菜会额外收费,若不需要须先告知侍应。  ?秘诀7: 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点,每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。  ?秘诀8:茶水先用茶水来洗餐具 热茶在拿来喝前,可先用来清洗餐具,洗过餐具的水直接倒入桌上大碗中即可。  ?秘诀9:去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障,就参考优质旅游服务协会认证过的餐厅吧!</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值