Div 仅在其中包含某些内容时可见答案

【问题标题】：Div only visible with something in itDiv 仅在其中包含某些内容时可见
【发布时间】：2015-06-02 06:56:43
【问题描述】：

我目前正在做一个项目，但遇到了一个问题。我目前有一个“外部”、一个“中间”和一个“内部”div，因此我可以将我的内容准确地放在中间。但是，当我在“内部”div 中放置一个 div 时，“内部”div 是可见的，但里面的 div 不可见（如果它不包含诸如字母之类的东西）。

这是一个例子：

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    position: relative;
    margin-left: auto;
    margin-right: auto; 
    width: 100px;
    height: 100px;
    background: red;
}

.invisiblediv {
    height 30px;
    width: 30px;
    left: 0px;
    bottom: 10px;
    background: blue;
    position: absolute;
}

<!DOCTYPE html>

    <html> 
        
        <head>
            <link rel="stylesheet" type="text/css" href="example.css">
        </head>
        
        <body>
          
            <div class="outer">
            <div class="middle">
            <div class="inner">
              
                <div class="invisiblediv"></div>
            
            </div>
            </div>
            </div>
            
        </body>
        
    </html>

【问题讨论】：

标签： html css invisible

【解决方案1】：

因为您的 CSS 中有错误。在invisiblediv CSS 中，height 属性后面缺少一个冒号。因此div 以高度 0 呈现。

【讨论】：

不是分号是冒号

【解决方案2】：

高度后加冒号

 .invisiblediv {
    height : 30px;
    width: 30px;
    left: 0px;
    bottom: 10px;
    background: blue;
    position: absolute;
}

http://output.jsbin.com/pinimocino/2/

【讨论】：