Question

我不知道为什么，这看似不合逻辑，但由于某种原因，一个div中的文本会影响另一个div的位置。文本占用的行数的差异抵消了具有较少行的div的高度。这些div是并排的内联框，所以它真的不应该那个时期。不仅如此，它们还有固定的尺寸。我不知道为什么会这样，但它破坏了我的设计。这是代码，在没有任何其他内容的情况下解决问题。

<div class="box">
<div class="main">
    <br><i>"Message"</i>
</div>
</div>
<div class="box">
<div class="main">
    <br><i>"Message that is longer than the other message."</i>
</div>
</div>
<style>
table {
    width:100%;
    }
div.box {
    background:#ccc;
    border:1px solid #000;
    display:inline-block;
    height:100px;
    padding:4px;
    margin:4px;
    width:100px;
    }
</style>

我的浏览器是Google Chrome，最新版本。

Answer 1

您需要将vertical-align: top添加到div.box。

没有进行演示：http://jsfiddle.net/ucE8r/
演示：http://jsfiddle.net/ucE8r/1/

见这里：

由于另一个div，没有明显原因的Div偏移

1 个答案: