精华内容
下载资源
问答
  • 什么是div塌陷

    2019-03-17 00:52:23
    我子元素 设置了浮动,就是脱离了文档,父元素里面就相当于没有东西了 ... 塌陷问题 <style type="text/css"> #nav1:after{ overflow:hidden } #nav2{ width:100px; height: 1...

    我子元素 设置了浮动,就是脱离了文档,父元素里面就相当于没有东西了

    塌陷问题
    <style type="text/css">
    
          
           #nav1:after{
                overflow:hidden
    
            }
    
           #nav2{
           	width:100px;
           	height: 100px;
           	background-color:blue;
           	float:left;
           }
    
          
    
    </style>
    

    我用谷歌ie9完全不知道父元素在哪? 给每个盒子设定固定的width和height 以下几种好像不能用 给外部的父盒子也添加浮动 overflow:hidden; 可能会带来内容不可见的问题 父盒子里最下方引入清除浮动块
    after+content方法清除浮动造成的塌陷 #nav1:after{ clear: both; content: “”; width: 0; height: 0; display: block; visibility: hidden; }

    展开全文
  • CSS div 塌陷问题

    2017-07-18 21:11:00
    嵌套塌陷 上下塌陷 overflow:hidden; 转载于:https://www.cnblogs.com/wms01/p/7202724.html

    嵌套塌陷

    上下塌陷

    overflow:hidden;

    转载于:https://www.cnblogs.com/wms01/p/7202724.html

    展开全文
  • img-div塌陷

    2018-11-12 16:43:42
    <div class="test_images"> <div class="img_wrap"> </div> </div> </div> <div class="blogs"> 蘭桂坊日本嘉年華 喜歡日本的人就像上了癮,無時無刻都想念日本。想要止止日本癮的朋友,11月可到以Cool ...

    问题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>

     

    展开全文
  • 今天写轮播图的时候发现,在设置图片宽度时,第二张图片会塌陷到下面去,其实是出于排版的原因两个div之间留下了空白字符,才导致两个div元素之间留有间距,导致图片塌陷。另外,display:inline-block的元素之间会...

    今天写轮播图的时候发现,在设置图片宽度时,第二张图片会塌陷到下面去,其实是出于排版的原因两个div之间留下了空白字符,才导致两个div元素之间留有间距,导致图片塌陷。

    另外,display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。



    解决方法:

    1、给父元素设置font-size : 0 p x;--------推荐
    2、取消掉换行符,如这样:<span>a</span><span> a</span>< span>a</span>连续。

    或者

    <div class="space">
        <a href="##">惆怅</a><!--
        --><a href="##">淡定</a><!--
        --><a href="##">热血</a>
    </div>
    
    <div class="space">
        <a href="##">惆怅</a
        ><a href="##">淡定</a
        ><a href="##">热血</a>
    </div>
    

    3、使用margin负值。
    4、使用浮动。
    5、另外还有使用letter-spacing、word-spacing等方法。




    虽然不换行可以暂时解决这一问题,但是肯定有更好的方法。在父类中设置font-size:0就可以完美地解决这个空白间距问题。 


    展开全文
  • div外边距塌陷问题

    2019-03-21 14:17:11
    块级元素的上下外边距有时候会合并,合并后的外边距等于合并前两个外边距中的较大值,这种现象称为外边距塌陷。 外边距塌陷有以下三种情况: 同级相邻元素 同级相邻元素之间的外边距会塌陷塌陷后的间距等于两个...
  • DIV+CSS 解决浮动塌陷

    2019-05-16 22:26:21
    方法一: overflow:hidden 方法二: 加一个DIV,样式为:clear:both; 方法三: 给DIV设置高度
  • 给父元素增加overflow样式, overflow:auto; 或者 overflow:hidden ;或者 overflow:scoll 子元素浮动: float:left;
  • 拥有父级div和3个子div。只知道child2的高度。... 已粘贴代码http://jsfiddle.net/586Cr/CSS父级div边框和高度塌陷提供了下面的代码。#parentt{background-color:#000000;border:4px solid #0000FF;}#ch...
  • div class="wrap"> <div class="content"> </div> </div> class .wrap{ background-color:red; width:400px; height:400px; margin-top:20px; } .content{ backgro...
  • div .clear{clear:both;} <div class="clear"></div> 缺点: 直接加height在父级 麻烦 *{ border:0; padding:0; margin:0; } 对所有元素设定 overflow:visible; hidden; 隐藏 scroll; 会有...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ... #div01{ width: 300px; height: 30
  • css代码: #father{ border: 1px solid green; } #a{ width: 100px; height: 100px; border: 1px solid red; ...div id="father"> <div id="a"> hello </div> </div>
  • <div class="box2"></div> </div> <div class="box3"></div> 第二种方式:通过clear属性来清除浮动 <!doctype html> <title></title> .box1{ border:1px solid red; } .box2{ ...
  • 当我们对div或者其他容器内部的标签使用float属性后,会出现此div下面的其他网页元素跑到此div的顶栏位置,这是由于使用了float使其父级容器出现了容器塌陷(检查元素是发现容器的高度变为0或者边框的上下像素值和)...
  • 文章目录盒子塌陷问题1 出现问题2 解决办法3 测试4 总结 盒子塌陷问题 1 出现问题 有两个嵌套DIV盒子,父盒子里面有一个子盒子,想让子盒子与父盒子上边框之间有一段间距,但是给子级元素添加的外边距没有起效果,...
  • 父元素塌陷 解决父元素塌陷:(清楚浮动带来的危害) 1.给父元素设置高度(不能消除危害,一般不用) 2.给父元素设置一个最小的儿子(添加一个空白div)给儿子设置clear both 可以设置一个伪类选择器: .clearDiv :...
  • 问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的...
  • 塌陷问题

    2019-10-31 10:12:20
    嵌套元素塌陷 当父盒子和子盒子都同时拥有margin-top时,都会使嵌套块元素塌陷 <style> .father { width: 400px; height:400px; margin-top:50px; background-color:black; } .son{ width:200px;...
  • HTML高度塌陷

    2019-09-11 13:16:14
    描述 父div靠子div撑开,子div全部设置浮动,父div因没有高度而出现塌陷的情况 解决 1. 父div设置overflow: hidden 2. clear: left | right | both | none 清除浮动 ...
  • 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样的: 图中可以看出,box1中已经没有了任何高度,这是由于box2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,237
精华内容 4,494
关键字:

div塌陷