1

Решил вопрос написав такой код:

.block {
  display: inline-block;
  height: 100px;
  background: #8BC34A;
  margin: 2px;
}
.parrent {
  display: block;
  position: relative;
  width: 550px;
  padding: 0 10px;
  border: 2px solid red;
  padding-bottom: 100px;
}
.child {
  display: inline-flex;
  width: auto;
  /*transform: translateX(-394px);*/
}
<div class="parrent">
  <div class="child">
    <div class="item-1 block" style="width: 200px">1</div>
    <div class="item-2 block" style="width: 120px">2</div>
    <div class="item-3 block" style="width: 300px">3</div>
    <div class="item-4 block" style="width: 70px">4</div>
    <div class="item-5 block" style="width: 350px">6</div>
    <div class="item-6 block" style="width: 200px">7</div>
  </div>
</div>

Но display: inline-flex; мне кажется не лучшее решение, не очень кроссбраузерно.

Может быть есть какой-то способ решить вопрос с помощью более старых стилей?

1 ответ 1

1
white-space: nowrap;

должен помочь:

.block {
  display: inline-block;
  height: 100px;
  background: #8BC34A;
  margin: 2px;
  white-space: normal;
}

.parrent {
  display: block;
  width: 550px;
  padding: 0 10px;
  border: 2px solid red;
  padding-bottom: 100px;
  white-space: nowrap;
}
<div class="parrent">
  <div class="item-1 block" style="width: 200px">
    1
  </div><div class="item-2 block" style="width: 120px">
    2
  </div><div class="item-3 block" style="width: 300px">
    3
  </div><div class="item-4 block" style="width: 70px">
    4
  </div><div class="item-5 block" style="width: 350px">
    6
  </div><div class="item-6 block" style="width: 200px">
    7
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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