Есть ли способ установить минимальную ширину CSS для плавающего элемента?

Question

У меня есть этот HTML:

<div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>

Я пропустил все эти оставленные дивы. Я установил ширину #subNav и #feedBar, но на #feed я установил его минимальную ширину. Требуется минимальная ширина, хотя окно больше. Есть ли способ, с помощью которого вы можете использовать минимальную ширину? Я пытаюсь сделать гибкий макет на странице.

Answer 1

В следующем ответе используется решение JavaScript в ответ на комментарий @ Chromedude (к исходному вопросу):

@ David Есть ли способ отменить это поведение?с javascript?

Я уверен, что есть гораздо более простой способ сделать это (конечно, с библиотекой JavaScript), но это было лучшее, что я мог придумать в это утро (вВеликобритания):

var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px');

Демонстрация JS Fiddle .

Использование jQuery (просто предложение относительно простоты, предлагаемой библиотекой):

var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth));

Answer 2

Используйте систему сетки, такую ​​как в Foundation 3 .При размещении на div, представляющем элемент сетки, min-width ведет себя очень хорошо.

Чтобы min-width работал без сетки, используйте правило CSS, которое вставляет невидимый псевдоэлементжелаемая минимальная ширина абзаца.

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
}

Более подробная информация находится в источнике , где я узнал об этом.