Question

试图制作一个简单的表格显示div。 css看起来像这样：

body {margin: 0px;}
        .mainDiv {
            display: table;
            padding-top: 4px 2px;
            border: 1px solid black;
            width: 100%;
            height: 120px;
        }
        .textDiv {
            display: table-cell;
            border: 1px solid black;
            margin: 0px 2px;
            text-align: center;
            height: 110px;
            padding: 0px;
            overflow: hidden;
        }
        .imageDiv {
            display: table-cell;
            margin: 0px 2px;    
            height: 110px;      
            width: 110px;
        }
        .text {
            margin: 0 auto;
            vertical-align: middle;
            display: inline-block;
        }

        IMG.image {
            display: flex;
            align-items: center;
            justify-content: center;                
        }

，HTML看起来像这样：

    <body>
    <div class = "mainDiv">
        <div class = "imageDiv">
            <img src = "images/twitterbird_whiteonblue.jpg" width = "100px" height = "100px" class = "image" />
        </div>
        <div class = "textDiv">
            <div class = "text">
                The Lang School @thelangschool <br />
                Register for The Lang School Open House  <br />
                #constantcontact http://conta.cc/1Td8LB2
            </div>
        </div>
        <div class = "textDiv">
            <div class = "text">
                The Lang School Open House <br />
                December 7 6:30 - 8:00 PM  <br />
                Register here
            </div>
        </div>
        <div class = "imageDiv">
            <img src = "images/facebook_logo.png" width = "100px" height = "100px" class = "image" />
        </div>
    </div>
</body>

我知道对齐图像的CSS不对，但这不是问题。没有文本，.mainDiv应该是120px高。但是当我添加文本时，它变为176像素高。当我在开发者控制台中查看它时，我看到了：

并以这种方式显示div的大小：

没有填充或任何其他标记。它没有特别的原因，只是额外的空间。如何将表格标记为120px高，因为它标记了？

Answer 1

https://jsfiddle.net/yk79ed9q/1/

这是因为您为textDiv

指定了110px的高度

.mainDiv {
    display: table;
    padding-top: 4px 2px;
    border: 1px solid black;
    width: 100%;
    height: 120px;
}
.textDiv {
    display: table-cell;
    border: 1px solid black;
    margin: 0px 2px;
    text-align: center;
    height: 110px;
    padding: 0px;
    overflow: hidden;
}

文字“The Lang school ..”的内容高度为54像素。

110-54 = 56.（在文本内容高度之后添加的额外高度）

120 + 56 = 176。（主div的高度+额外的高度）

如果您希望主div为120px，请删除height:110px。

文本div上方和下方的额外空间，未标记为填充或边距

1 个答案: