부분적으로 크기를 조정할 때 인접 부분을 숨기기

Question

거의 한 시간 동안 검색을 한 후 또 한 시간 동안 실험을 한 후에 CSS/HTML에서이를 수행하는 방법을 찾지 못했습니다.

파란색 상자가 페이지의 기본 내용을 고정 된 픽셀 너비로 유지하는 div 인 경우 빨간색 상자는 고정 된 픽셀 너비로 장식을 유지하는 div이고 검은 색 선은 브라우저 크기를 나타냅니다.

• A -겠습니까 하지 기능 것도 같은 가로 스크롤 막대가 숨겨져 있습니다. 모든 것이 중심에 위치합니다.
• B - 이 아닌은 측면 div 만 숨겨 지므로 가로 스크롤 막대가 있습니다. 메인 div가 중앙에 배치됩니다.
• C - 에는 가로 스크롤 막대가 있으므로 이제는 주 div가 페이지에 맞지 않습니다. 메인 div는 가운데이며 사이드 div를 보려면 스크롤 할 수 없어야합니다.

작은 화면 해상도 또는 단순히 창 크기 조정시 사용자에게 피해를주지 않고 페이지에 특별한 장식을 추가하고 싶습니다. 기본 div는 기본 콘텐츠를 보유하므로 사용자는 스크롤하여 모든 내용을 볼 수 있어야합니다. 반면에 사이드 div는 장식용으로 만 존재하므로 브라우저는이를 기반으로 스크롤하지 않아야합니다. 차라리 사이드 디비전을 배경 이미지로 설정하지 말고, 이것을 넘어선 자유가 증가하고 싶습니다.

은 인 것으로 보입니다. 그렇지? 오버 플로우로 놀아 왔지만 아무 것도 할 수 없습니다. 이 효과를 달성하기 위해 overflow: hidden; :

는

Answer 1

당신은 CSS를 사용한다 (명확하게하기 위해이 수평 중심/스크롤, 수직하지에 관한 것입니다). 하나는 더 길게, 다른 하나는 유체 너비로 배치하십시오.

.parent {width: 90%; overflow: hidden;} 
.parent .child {width: 1200px; margin: auto;} 

Answer 2

사용 백분율 값이

HTML을 달성하기 위해

<div class="outer"> 
    <div class="d1"></div> 
    <div class="d2"></div> 
    <div class="d3"></div> 
</div>​ 

CSS

.outer{wisth:100%;border:solid 1px black; padding:25px} 
.d1{background:red; width:32%; height:60px; display:inline-block} 
.d2{background:green; width:32%; height:60px; display:inline-block} 
.d3{background:blue; width:32%; height:60px; display:inline-block} 

LIVE DEMO