부모 div가 일부 어린이 만 스트레칭되도록 허용하고 다른 사용자는 허용하지 않음

Question

콘텐츠의 너비가 navbar의 너비와 정확히 일치하도록 navbar 아래에 콘텐츠 열을 만들려고합니다. 이것은 내가 예상했던 것보다 어렵다는 것을 증명합니다.

이 같은

을 감안할 때 뭔가 :

<div id="Wrapper"> 

    <!-- nav should all be on one line. #Wrapper should stretch to hold it--> 
    <nav> 
     <ul> 
      <li>link 1</li> 
      <li>link 2</li> 
      <li>etc</li> 
     </ul> 
    </nav> 

    <!-- article should not stretch #Wrapper, even if it is wider than nav --> 
    <article> 
     <h1>title</h1> 
     <p>This should be constrained to nav's width, 
      even if by all rights it would be wider</p> 
    </article> 
</div> 

나는 이런 식으로 뭔가 달성하기 위해 노력하고있어 :

+-----------------------------+ 
| +-------------------+ | 
| |+-----------------+| | 
| ||link 1 link 2 etc|| | 
| |+-----------------+| | 
| |+-----------------+| | 
| ||TITLE   || | 
| ||this should be || | 
| ||constrained to || | 
| ||nav's width, even|| | 
| ||if by all rights || | 
| ||it would be wider|| | 
| |+-----------------+| | 
| +-------------------+ | 
+-----------------------------+ 

내가 #Wrapper에 고정 폭을 설정할 수 있지만, 폰트 변경이나 저울 경우 , navbar는 기사의 너비와 일치하지 않습니다.

한편 navbar가 #Wrapper를 늘릴 수있는 방법을 찾지 못하고 기사가 더 늘어나지 않도록합니다.

세 번째 손에서 요소를 형제의 너비와 일치시키는 방법이 있다면 #Wrapper를 완전히 제거 할 수 있습니다.

Answer 1

랩 기사, 절대적 위치. 새 div는 바깥 쪽 너비와 일치하고 스트레칭없이 기사를 포함합니다.

단점은 아래의 유용한 기능을 수행하는 것이 매우 어렵다는 것입니다.

HTML :

<div id="Wrapper"> 
    <nav> 
     <ul> 
      <li>link 1</li> 
      <li>link 2</li> 
      <li>etc</li> 
     </ul> 
    </nav> 

    <div id="WidthBinder"> <!-- all further content goes in here --> 
     <article> 
      <h1>title</h1> 
      <p>This should be constrained to nav's width, 
       even if by all rights it would be wider</p> 
     </article> 
    </div> 
</div> 

CSS :

li { display: inline; } 

body { text-align: center; } 
body * { text-align: left; } 

#Wrapper { 
    display: inline-block; 
    position: relative; 
} 

#WidthBinder { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
} 

바이올린 : http://jsfiddle.net/yU32B/3/

Answer 2

fixed table layout: 가로 레이아웃은 표의 너비와 열의 너비에만 의존하며 셀의 내용에 의존하지 않습니다.

이렇게하면 기사의 콘텐츠가 늘어나지 않아 기사가 #Wrapper를 늘리지 못하게됩니다.

article { 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 

예 : 0 픽셀로 설정 왼쪽과 오른쪽에 다른 사업부에서 http://jsfiddle.net/CTF9h/