寻筝
2017-01-15 05:50
采纳率: 72.7%
浏览 1.8k

为何我的DIV模块显示不出颜色

![图片说明](https://img-ask.csdn.net/upload/201701/15/1484459411_881740.jpg)图片说明
最后一个DIV模块,仅仅显示字符,其余属性都未显示

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 已采纳

    content要清除浮动,要不后续的div会顶上去了

     <div id="content" style="zoom:1;overflow:hidden">
    
    打赏 评论
  • 寻筝 2017-01-15 05:47

    图片说明

    打赏 评论
  • Andone_hsx 2017-01-15 09:21

    原因:很简单!当 id =“content”的div里面的三个div(也就是id为content的div的子元素)浮动,其元素没有高度,最后一个div向前占位,
    不过被浮动的三div给挡住了。解决这种情况的方法有很多种
    方法1:你可以在id为content的div的最后一个子元素后面加一个空子元素;
    <!doctype html>



    test


    头部





    <!-- 增加空子元素 -->


    xia


    
    ```![图片说明](https://img-ask.csdn.net/upload/201701/15/1484471614_448616.png)
    
    
    方法2:给id为content的div加上overflow:hidden;
    <!doctype html>
    <html>
         <head>
                <meta charset="UTF-8">
                <title>test</title>
         </head>
         <body>
            <div style="background:blue;height:100px;">头部</div>
            <div id="content" style="overflow:hidden;">
                <div style="width:33%;height:250px;float:right;background:green;"></div>
                <div style="width:33%;height:250px;float:left;background:red;"></div>
                <div style="width:33%;height:250px;float:left;background:black;"></div>
            </div>
            <div style="background:red;height:250px;">xia</div>
         </body>
    </html>
    
    
    
    
    
    方法3:使用伪元素选择器:after
    <!doctype html>
    <html>
         <head>
                <meta charset="UTF-8">
                <title>test</title>
                <style>
                    .clear:after{
                        content:"";
                        display:block;
                        clear:both;
                    }
                </style>
         </head>
         <body>
            <div style="background:blue;height:100px;">头部</div>
            <div id="content" class="clear">
                <div style="width:33%;height:250px;float:right;background:green;"></div>
                <div style="width:33%;height:250px;float:left;background:red;"></div>
                <div style="width:33%;height:250px;float:left;background:black;"></div>
            </div>
            <div style="background:red;height:250px;">xia</div>
         </body>
    </html>
    
    
    
    
    
    
    
    打赏 评论
  • Andone_hsx 2017-01-15 09:25
     <!doctype html>
    <html>
         <head>
                <meta charset="UTF-8">
                <title>test</title>
         </head>
         <body>
            <div style="background:blue;height:100px;">头部</div>
            <div id="content">
                <div style="width:33%;height:250px;float:right;background:green;"></div>
                <div style="width:33%;height:250px;float:left;background:red;"></div>
                <div style="width:33%;height:250px;float:left;background:black;"></div>
                <!-- 增加空子元素 -->
                <div style="clear:both;"></div>
            </div>
            <div style="background:red;height:250px;">xia</div>
         </body>
    </html>
    
    打赏 评论

相关推荐 更多相似问题