0

введите4 сюда описание изображения

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

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css"/>.
</head>

<body>
<div class="content">
    <div class="section">
        <div class="section1">
            <span>123</span>
        </div>
        <div class="section2">
        </div>
    </div>
</div>
</body>
</html>
section{
    background-color: #c77700;
}
.section1{
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: #2b4554;
}

.section2{
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: #0f834d;
}
1
  • 1
    Потому что надо использовать флексы а не инлайн блоки из 90х
    – user245150
    6 дек 2019 в 11:55

1 ответ 1

0

Потому что inline-block'ам нужно ещё вертикальное выравнивание задавать, чтоб они не разъезжались:

section{
    background-color: #c77700;
}
.section1{
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: #2b4554;
}

.section2{
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: #0f834d;
}
.section1, .section2{
  vertical-align: top;
}
<div class="content">
    <div class="section">
        <div class="section1">
            <span>123</span>
        </div>
        <div class="section2">
        </div>
    </div>
</div>

3
  • Спасибо! А почему так происходит?
    – ensom
    6 дек 2019 в 12:16
  • @ensom, потому что по умолчанию у inline-block установлено vertical-align: baseline. Когда Вы в один инлайновый блок добавляете текст, он выстраивается в эту базовую линию, а сам блок, соответственно, съезжает. 6 дек 2019 в 12:24
  • Большое спасибо!
    – ensom
    6 дек 2019 в 12:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.