为什么在将内容插入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显示：阻止问题就消失了。如果你的图像太高，它仍会在盒子之外，但除此之外它还能正常工作。

你在DIV上有一个设定的高度，这就是为什么图像突破了开箱即用的原因。如果你移除那个高度就可以了。

2）使用vertical-align：top也可以修复它。在这里找到：Why does this inline-block element have content that is not vertically aligned