동적 HTML 본문 너비 (100 % 이상)

Question

가로 웹 페이지를 만들고 있는데 그 안에 내용에 따라 본문을 동적으로 확장하려고합니다. 모든 작품을 볼 수있는 http://www.obliquo.co.uk/

,하지만 난 픽셀 값에 거대한 몸 폭을 설정하는 강제 오전 :

나는 여기에 웹 사이트를 구축하고있다. 페이지의 내용이 항상 변경됩니다. 픽셀 단위로 너비를 설정하지 않으면 div가 자연스럽게 수직으로 부딪치기 시작합니다.

Answer 1

가장 좋은 방법은 JS를 사용하여 화면을 변경할 때마다 너비를 계산 한 다음 해당 값을 본문의 너비 특성에 다시 JS를 사용하여 적용하는 것입니다.

Answer 2

이미 jquery를 사용하고 있으므로 다음을 수행 할 수 있습니다. IE8에서 시도해 보았습니다. 다른 브라우저의 경우 약간 조정해야 할 수도 있습니다.

귀하의 페이지에 마지막 섹션으로 링크를 가질 계획이라면 스크립트 태그를 추가하여 트릭을해야합니다. 만약 당신이 그것을 바꾼다면, 좀 더 다이나믹하게하기 위해 arround를 연주해야 할 수도 있지만, 이것이 제가 따라야 할 기본 원리입니다.

<script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var width = $("#links").width() + $("#links").position().left; 
       $("body").css("width", width + "px"); 
      }); 
</script> 

Answer 3

나는 완전히 HTML을 이해하는 시간을 촬영하지만, 다음과 같은 구조를 가정하지 않은 :

#container { 
    white-space: nowrap; 
} 
section, article { 
    display: inline-block; 
    white-space: normal; 
    /* no float */ 
} 

이 각 섹션 수 :

<div id="container"> 
    <section>...</section> 
    <section>...</section> 
    <article>...</article> 
    <article>...</article> 
    <section>...</section> 
    <section>...</section> 
</div> 

을 다음 CSS를 사용/기사가 인라인 요소로 흐를 수 있습니다 (즉, 줄 바꿈). 그러나 white-space: nowrap 선언은 줄 바꿈을 방지하고이 줄을 동일한 줄에 유지합니다.