html - 为什么在将内容插入 Div 容器时我的布局会中断 (HTML CSS)

Question

我有一个简单的 3 列布局。

每当我将内容或图像插入三列之一时，顶部或底部会出现奇怪的边距，并且布局会中断。

这是因为我没有 Normalizer 吗？

JSFIDDLE

<div class="e-container">

    <div class="edate">
        <!-- Content -->
    </div>

    <div class="eimage">   
         <!-- When I add this it breaks
        <img src="http://www.keenthemes.com/preview/metronic/theme/templates/admin/form_image_crop.html" width="300" height="200">-->
    </div>

    <div class="einfo">
        <!-- Content -->
    </div>
</div><!-- Container -->

CSS

.e-container {width: 100%;
border: 1px solid black;
height: auto;
text-align: center;}

.edate {
    width: 8em;
    height: 200px;
    border: 1px solid black;
    margin: 1em;
    display: inline-block;
}

.eimage {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
    margin: 1em;
}

.einfo {
    width: 28em;
    height: 200px;
    display: inline-block;
    position: relative;
    border: 1px solid black;
    margin: 1em;
}

hr {width: 20%;}

截图

这是没有 div 保存任何内容的布局...

当我将任何内容添加到 3 个 div 中的任何一个时...

Answer 1

1) 我玩弄了 fiddel 并注意到如果您使 img display:block 问题消失。如果您的图像太高，它仍会超出框框，但除此之外效果很好。

您在 DIV 上设置了高度，所以这就是图像突然出现的原因。如果您删除该高度，那没关系。

2) 放置 vertical-align: top 也可以修复它。在这里找到:Why does this inline-block element have content that is not vertically aligned