Member 13833943 Ответов: 1

Тег подразделения, действующего наблюдать странные

Я сделал три коробки на своем экране с помощью тегов деления шириной 19%, 38%, 40%, все они складываются до 97%. Я хочу, чтобы все они были рядом, поэтому я использовал display: inline-block, и все они действуют идеально, как мне нравится здесь: Edit fiddle - JSFiddle[^]

Но в тот момент, когда я добавляю что-то в эти теги разделения, boc движется вниз без всякой причины.


Если я добавлю что-то в нужное поле : Edit fiddle - JSFiddle[^]

Это происходит в тот момент, когда я добавляю что-то в эти коробки.

Что я уже пробовал:

<div class="wrapper-details-page">
    <div class="wrapper-details-page-left">  </div>
    <div class="wrapper-details-page-middle">  </div>
    <div class="wrapper-details-page-right">  </div>
</div>
.wrapper-details-page-left {
  border: 1px solid black;
  min-height: 600px;
  width: 19%;
  display: inline-block;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

*{
  background-color: skyblue;
}

.wrapper-details-page-middle {
  border: 1px solid black;
  min-height: 600px;
  width: 38%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-block;
  background-color: pink;
}

.wrapper-details-page-right {
  border: 1px solid black;
  min-height: 600px;
  width: 40%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-block;
}

1 Ответов

Рейтинг:
1

Richard Deeming

Добавь vertical-align:top к вашим услугам inline-block элементы.

html,
body {
    background-color: skyblue;
}

.wrapper-details-page > div {
    border: 1px solid black;
    min-height: 600px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

.wrapper-details-page-left {
    width: 19%;
}

.wrapper-details-page-middle {
    width: 38%;
    background-color: pink;
}

.wrapper-details-page-right {
    width: 40%;
}
Обновленная демо-версия[^]

Для современных браузеров, вы, возможно, захотите рассмотреть вопрос об использовании адаптируемых блоков для макета:
@supports (display:flex){
    .wrapper-details-page {
        display: flex;
    }
    .wrapper-details-page > div:last-child {
        flex-grow: 1;
    }
}
Демонстрация с Flexbox[^]
Постепенно повышая CSS верстке: от поплавков до адаптируемых блоков в сетке — разбив журнал[^]