inline-block с max-width переносится на новую строку

220

09 июня 2018, 06:20

Есть два 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

Answer 1

Например вот 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>

Answer 2

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Плагин maskedinput

Есть определенная маска для полей с вводом телефона с кодом страны сделанная при помощи плагина maskedinputВозможно ли сделать так, чтобы код...

320

jQuery

Как изменить(уменьшить) коефициент увеличения evaluate zoom?

Пробую zoomLevel=2 і тд

178

jQuery

Выпадающее меню с поиском и списком городов!

Затея такая: При клике на поле "Выберите город" выпадает меню, при двойном клике закрывается, при клике вне дива закрывается: В этом меню сразу...

212

jQuery

jQuery $(this) в if условии внутри click function

Я хотел бы додать class только для одного (create-new-label-main-container div) с backgrond-color 'ColorOfLabel', не для всех, но проблема в том, что $(this) в этом коде это кликнутый('

166