0

Есть два inline-block расположенные горизонтально. У одго - ширина фиксированная, у другого - задана max-width. Сделано это для того, чтобы один сжимался при уменьшении ширины родительского блока, а второй был фиксированной ширины. Но на деле же, тот блок, который с max-width переносится на новую строку и там уже начинает сжиматься. Как сделать, чтобы блок сжимался не переносясь

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.widthFixed {
  width: 338px;
  height: 235px;
  background: red;
  display: inline-block;
}

.widthNoFixed {
  display: inline-block;
  max-width: 400px;
  height: 235px;
  background: green;
  vertical-align: top;
}
<div class="container">
  <div class="widthFixed"></div>
  <div class="widthNoFixed"></div>
</div>

jsfiddle

2 ответа 2

1

Сделано это для того, чтобы один сжимался при уменьшении ширины родительского блока, а второй был фиксированной ширины.

Неправильно сделано. Блоки распирает контентом. Если перенос не запрещен, а места для блока не хватает, блок будет перенесен туда, где хватает. То есть, на новую строку.

Чтобы этого не было, нужно задать размеры блока так, чтобы место было всегда (что вам и показали уже) либо запретить блоку перенос. Запретить перенос можно по-разному, например, запихнуть блоки внутрь таблицы из двух ячеек, или поиграть с display:table-cell, а лучше всего сделать требуемое флексами.

0

Например вот tak

.container{
  max-width: 1000px;
  margin: 0 auto;
}

.block1{
  width: 338px;
  height: 235px;
  background: red;
  display: inline-block;
}

.block2{
  display: inline-block;
  max-width: calc(100% - 338px);
  height:235px;
  background:green;
  vertical-align: top;
}
<div class="container"><div class="block1"></div><div class="block2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ex, consectetur. Molestiae id explicabo atque est voluptates obcaecati eaque sed, rem eius maxime, sit accusantium! Fuga culpa aspernatur ducimus cum fugit officia aliquid magnam. Voluptates inventore quam qui tempoecati corporis, idita vero. Unde in accusantium, ex ipsum, tenetur necessitatibus optio placeat nam nobis voluptatibus nostrum fugiat sapiente ea illo quaerat. Laboriosam.</div></div>

Или вот так

.container{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

.block1{
  width: 338px;
  height: 235px;
  background: red;
}

.block2{
  max-width: calc(100% - 338px);
  height:235px;
  background:green;
  vertical-align: top;
}
<div class="container"><div class="block1"></div><div class="block2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ex, consectetur. Molestiae id explicabo atque est voluptates obcaecati eaque sed, rem eius maxime, sit accusantium! Fuga culpa aspernatur ducimus cum fugit officia aliquid magnam. Voluptates inventore quam qui tempoecati corporis, idita vero. Unde in accusantium, ex ipsum, tenetur necessitatibus optio placeat nam nobis voluptatibus nostrum fugiat sapiente ea illo quaerat. Laboriosam.</div></div>

Ваш ответ

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

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