Question

我目前正在开展一个项目并且已经陷入了问题。我目前有一个“外部”，一个“中间”和一个“内部”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>

Answer 1

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

Answer 2

在高度后添加冒号

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

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

Div只能在其中显示某些内容

2 个答案: