이 내가 할 노력하고있어입니다

Question

하나와 두 개의 열 레이아웃 모두를 위해 작동하는 CSS 규칙을 만들기 : (. Larger image)

Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg 을

을 <nav> 요소가 존재하는 경우 디자인, 나는 그것을 아래의 예처럼 보이기를 원한다. #content div에 백분율 값이 설정되어있는 동안이 작업을 수행 할 수 있습니까? 두 개의 서로 다른 스타일을 사용하지 않고 #content (너비 값이 서로 다른 두 가지 스타일을 모두 사용하지 않아도 가능)인지 궁금합니다.
그냥 뜨지 않는 것처럼 보입니다.

첫 번째 예제에서 #content에 백분율 값을 지정하려는 이유는 외부 광선의 환영을 생성하는 #body에 배경 이미지가 있기 때문입니다.

편집 : 대신 여백을 사용하여 너비 비율을 사용하지 않아도됩니다. 예 여기

Answer 1

점검 : http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

당신이해야 할 것은 당신의 <nav> 요소에 float:right 및 width을 설정하고 모든 float 또는 폭, 단지 설정 여백없이 #content을 떠날 것입니다. 이 방법으로 컨텐츠는 모든 주어진 공간을 차지하려고 시도 할 것이고 탐색에 '빠지기'를 시도하지 않을 것입니다.

그런 다음 <nav> 요소를 숨기면 내용의 크기가 자동으로 조정되지만 오른쪽에서 채우기도 제거해야합니다.

이것은 예제 코드입니다 :

당신이 컨테이너 요소에서 class="double"을 제거한 경우

<style type="text/css"> 
    #container { width:700px; margin:0 auto; border:1px solid #000; } 
    #nav { display:none; } 
    .double #nav { width:10%; float:right; display:block; } 
    #content { margin-right:10%; border-right:1px solid #000; } 
</style> 

<div id="container" class="double"> 
    <div id="nav">nav content</div> 
    <div id="content">page content</div> 
</div> 

이제 콘텐츠가 올바르게 주어진 공간의 90 %를 가지고 크기가 조정되어 표시됩니다. #content 앞에 스타일을 추가하기 전에 .double을 100 % 추가하십시오.