Элементы встроенного блока и обоснование выравнивания по вертикали

#css #position

#HTML #выравнивание по вертикали #css

Вопрос:

У меня есть 2 поля div рядом друг с другом, используя display: inline-block.

Без содержимого оба раздела встроенного блока выровнены по вертикали сверху.

Если у обоих есть содержимое, они также выравниваются по вертикали сверху.

Если только один из них содержит текстовое содержимое, то поле div, содержащее текстовое содержимое, выравнивается по вертикали снизу, в то время как поле без какого-либо текстового содержимого остается выровненным по вертикали сверху.

Если в одном поле содержится обычный текст, а в другом, например, поле ввода или тег заголовка, то поле только с текстовым содержимым перемещается вниз лишь незначительно (возможно, на 2 или 3 пикселя), в то время как поле с тегом ввода или заголовка остается сверху.

Пожалуйста, смотрите ссылку jsfiddle ниже

Почему создатели сделали это вместо того, чтобы всегда выравнивать их по верхнему краю? Есть ли за этим более глубокая причина?

1. Можете ли вы опубликовать демонстрацию того, что вы делаете?

2. Я тестирую и спрашиваю себя, почему: jsfiddle.net/genwQ

3. Вы пробовали float: left; ?

4. да, float будет работать. Также было бы вертикальное выравнивание: top. Мне интересно, есть ли объяснение, почему vertical-align: top не используется по умолчанию. Я хочу лучше понять позиционирование элементов…

5. jsfiddle.net/genwQ/3 , jsfiddle.net/X3RLB/2 надеюсь, что что-то может помочь

Ответ №1:

Обновить:

В вашем примере просто добавьте:

 .content_boxes{
    width: 400px;
    height: 200px;
    background: lightgreen;
    display: inline-block;
    vertical-align:top;
}

Скрипка:

http://jsfiddle.net/genwQ/1/

Вы должны установить, vertical-align:top; чтобы каждый элемент был display:inline-block; . Осторожно, чтобы не перепутать: это элемент, а НЕ родительский.

Пример:

 ul li {
    display:inline-block;
    vertical-align:top;
}

ДЕМОНСТРАЦИЯ:

http://jsfiddle.net/X3RLB/

Осознайте, что между вашими inline-block элементами появляется нежелательный пробел. Это пространство НЕ может быть удалено с помощью margin:0px; свойства. Чтобы удалить их, вы должны добавить тег комментария между inline-block элементами.

Пример:

 <div id="content_cnt">
    <div class="content_boxes"></div><!--
    --><div class="content_boxes">dsasda</div>
</div>

Скрипка:

http://jsfiddle.net/genwQ/2/