Многострочный текст остается внизу?

Question

Многострочный текст остается внизу?

0

Когда HTML COde является

<div class='wrap'>
<div class="blocks">div 1</div>
<div class="blocks">div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>
</div>
<div class="blocks">div 3</div>
<div class="blocks">div 4</div>
</div>

CSS выглядит следующим образом

.blocks {
display:inline-block;
width: 25%;

.wrap {
    width:100%;
}

Полученный текст div 1 и div 3 выровняется в нижней части div2. Есть идеи?

Poochi Teap 05 май 2014, в 20:36

Источник

0

Попробуйте * {margin: 0; padding: 0;} вверху вашего CSS, чтобы убедиться, что в браузере нет встроенных стилей.
TylerH 05 май 2014, в 17:42
1

Также обратите внимание, что вам не хватает закрывающей } в вашем CSS.
TylerH 05 май 2014, в 17:55

Теги:

html

css

2 ответа

Ещё вопросы

Попробуйте * {margin: 0; padding: 0;} вверху вашего CSS, чтобы убедиться, что в браузере нет встроенных стилей.
Также обратите внимание, что вам не хватает закрывающей } в вашем CSS.

EyasSH · Answer 1 · 2014-05-05T16-24-00.000Z

Стиль по умолчанию для элементов, отображаемых встроенными (включая изображения и элементы inline-block), должен иметь vertical-align: baseline; ,

Это в основном означает, что все ваши элементы выстроены в линию с базовым текстом в текстовом потоке.

Попробуйте поместить border в свои элементы <div> чтобы увидеть, что происходит. Вы можете изменить vertical-align по vertical-align на bottom чтобы исправить эту проблему.

raunay · Answer 2 · 2014-05-05T17-45-00.000Z

Вот модифицированный код для проблемы:

HTML

<div class='wrap'>
<div class="blocks">div 1</div>
<div class="blocks">div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>
</div>
<div class="blocks">div 3</div>
<div class="blocks">div 4</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.blocks {
  display:inline-block;
  padding: 10px;
  width: 25%;
  float: left;
  border: 1px solid black
}

.wrap {
    width:100%
}

.wrap:after {
  clear: both
}

РЕЗУЛЬТАТ

СМОТРИТЕ КОДЕПЕН

Несколько замечаний: -It - это поведение по умолчанию, которое браузеры помещают в контейнер с меньшей height в нижней позиции относительно контейнера с максимальной высотой. Этому может помочь использование float: left. Он сообщает браузеру о том, чтобы отобразить элемент, "повесив" его в верхнем левом углу.

-Oh, не забудьте использовать clear:both для контейнера с float: left дочерние элементы, чтобы очистить это поведение "висячего" рендеринга.

-Use reset.css, чтобы избавиться от этого ненужного поведения браузера по умолчанию. В этом примере я использую

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

-Notice box-sizing: border-box size box-sizing: border-box, это поможет вам правильно определить контейнер, когда вы добавите свойства padding в свои контейнеры.

-Have весело играет: D