Блог

Главная - Вопросы по программированию - Встроенный div неправильно выровнен

Встроенный div неправильно выровнен

#css #inline

#css #встроенный

Вопрос:

Пожалуйста, смотрите JSfiddle:http://jsfiddle.net/MU2y2 Нижние разделы не выровнены должным образом, но я не могу найти почему. Я думаю, это должно быть связано с отображением встроенного блока. Однако нет верхнего поля

 <div class="kaders">
<div class="rij">
    <div class="kader" href="http://www.checkjekamer.nl/check/huurZelfstandig">
        <h1>Zelfstandig</h1>
        <p>Check hier je kamer als je in <b>zelfstandige</b> woonruimte woont</p>
    </div>

    <div class="kader" href="http://www.checkjekamer.nl/check/huurOnzelfstandig">
        <h1>Onzelfstandig</h1>
        <p>Check hier je kamer als je in <b>onzelfstandige</b> woonruimte woont</p>
    </div>
</div>

<div class="rij">
    <div class="kader" href="http://www.checkjekamer.nl/check/huurToeslag">
        <h1>Huurtoeslag</h1>
        <p>Check hier de hoogte van je <b>huurtoeslag</b></p>
    </div>

    <div class="kader" href="http://www.checkjekamer.nl/check/brandveiligheid">
        <h1>Brandveiligheid</h1>
        <p>Check hier de <b>brandveiligheid</b> van je kamer</p>
    </div>
</div>
  

 @import url(http://fonts.googleapis.com/css?family=Open Sans);


body{
    font-family:Open Sans;
}

/*  background-color: #f7f7f7;
    color:#d10000;
*/

.kaders{
    text-align:center;  
}

.kader{
    cursor:pointer;
    display:inline-block;
    width:200px;
    height:200px;
    background-color: #f7f7f7;
    margin:10px;
    margin-top:0;
}

.rij{
    display:block;
    border:1px solid pink;
}

.kader h1{
    font-size:1.1em;

}

Ответ №1:

Просто добавьте vertical-align: text-top; в свой .kader

Подробнее об этом читайте vertical-align здесь

 .kader{
    cursor:pointer;
    display:inline-block;
    width:200px;
    height:200px;
    background-color: #f7f7f7;
    margin:10px;
    margin-top:0;
    vertical-align: text-top;
}

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

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

1. Привязка. (Ну, в значительной степени, я вошел первым ;)) Поскольку это было почти в то же время, и это слишком правильно … 1

Ответ №2:

Добавить vertical-align: top; в .kader .

CSS:

 .kader{
    cursor:pointer;
    display:inline-block;
    width:200px;
    height:200px;
    background-color: #f7f7f7;
    margin:10px;
    margin-top:0;
    vertical-align: top;
}

ДЕМО ЗДЕСЬ