Смещение деления без видимой причины из-за другого деления - PullRequest
Новая
       27

Смещение деления без видимой причины из-за другого деления

2 голосов
/ 23 апреля 2011

Понятия не имею почему, и это кажется нелогичным, но по какой-то причине текст в одном элементе 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, последняя версия.

1 Ответ

4 голосов
/ 23 апреля 2011

Вам необходимо добавить vertical-align: top к div.box.

Демо без: http://jsfiddle.net/ucE8r/
Демо с: http://jsfiddle.net/ucE8r/1/

См. Здесь:

...