떠 다니는 요소에 CSS 최소 너비를 설정할 수있는 방법이 있습니까?

Question

나는이 html을 가지고있다 :

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

나는이 div들을 모두 떠 다니게되었다. #subNav과 #feedBar의 너비를 설정했지만 #feed에서는 최소 너비를 설정했습니다. 창이 더 큰 경우에도 최소 너비가 필요합니다. 떠있는 상태에서 최소 너비 작업을 할 수있는 방법이 있습니까? 페이지에서 유연한 레이아웃을 만들려고합니다.

Answer 1

다음 대답은 (원래의 질문에) @ Chromedude의 코멘트에 반응하는 자바 스크립트 솔루션을 사용

@ 데이비드이 동작을 재정의 할 수있는 방법이 있습니까? 자바 스크립트?

내가 (확실히 자바 스크립트 라이브러리)이 일을 훨씬 더 간단한 방법이있을거야, 그러나 이것은 (영국에서) 나는 아침이 시간에 가지고 올 수있는 최선이었다

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 demo. 같은 Foundation 3의 하나로서

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

Answer 2

사용 그리드 시스템 (단지 제안 등 도서관에서 제공하는 용이성 등) jQuery를 사용

. 격자의 요소를 나타내는 div에 배치하면 min-width은 정상적으로 작동합니다.

격자없이 min-width을 작동 시키려면 원하는 최소 단락 너비의 보이지 않는 의사 요소를 삽입하는 CSS 규칙을 사용하십시오.

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

자세한 내용은 source입니다.