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

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

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

Скриншот

Скриншот

HTML

 <html>
<head>
    <title>My Web site</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="home.css">
</head>
<body>
    <div id="container">
        <div id="jumbotron">

        </div>
        <center>
            <div class="listbox">
                <h1>exapmle</h1>
            </div>
            <div class="listbox">
            </div>
        <div class="listbox"></div>
        </center>
       <!-- container end div -->
    </div>
</body>
</html>
 

CSS

 #container{
    height:100%;
    width:100%;
    background-color: #669999;
    padding: 5px 5px 5px 5px;
}
.listbox{
    height: 250px;
    width: 250px; 
    background-color: #003333;
    display:inline-block;
    border-radius:5px;
}
#jumbotron{
    margin:2px auto 5px auto;
    background-color:black;
    border-radius:5px;
    height:450px;
    width:900px;
    color:#ffffff;
}
 

Ответ №1:

Применитесь vertical-align:top; к вашему .listbox классу CSS. Эта проблема связана vertical-align с значением по умолчанию ( baseline ) , поэтому, когда есть текст, это влияет на базовую линию для всех встроенных элементов и выталкивает один с текстом вниз.

JSFiddle

Ответ №2:

Это происходит, потому что браузер пытается сопоставить базовую линию всех встроенных элементов.

Добавить vertical-align: middle в .listbox

Комментарии:

1. Это устранило проблему. Спасибо.

Ответ №3:

Это из-за <h1> тега, который у вас здесь:-

 <div class="listbox">
    <h1>exapmle</h1>
</div>
 

Вы не указали для этого никакого правила. Попробуйте добавить это в свой CSS:-

 h1 { float: left; }