3 개의 고정 된 열이있는 CSS 레이아웃. 왼쪽 및 오른쪽 저해상도 화면에 숨김

Question

이미지에서 볼 수있는 것처럼 3 개의 고정 열이있는 CSS 레이아웃을 만들려고하지만 왼쪽 (1) 및 오른쪽 (3) 열은 저해상도 모니터에서 숨겨야합니다 (또는 창이 전체 크기가 아닌 경우).

나는 비슷한 발견 stackowerflow에

했으나 왼쪽과 오른쪽 열은 크기가 고정되어 있지 않습니다. 또한이 예제의 텍스트는 저해상도 창 (센터 열이 내려갑니다!)에서 센터 디자인을 "충돌"합니다.

jsfiddle.net/XMg2h/418/

Answer 1

확실히 거기에 이것을 접근하는 다른 방법이 있지만 여기에 기본적으로 어떤 상대와 절대 위치를 저글링 포함 내 빠른 솔루션입니다. 여기에 내가 얻을하는 데 사용되는 스타일의 당신이 찾고 있던 동작 (HTML은 동일하게 유지) (희망?) : div의 왼쪽

.example{ 
    width:300px; 
    margin:0 auto; 
    position:relative; 
} 
.example div{ 
    position:absolute; 
    width:50px; 
    top:0; 
    height:300px; 
} 
.example div:first-child{ 
    left:-50px; 
} 
.example div:last-child{ 
    right:-50px; 
} 
.example div.center{ 
    width:300px; 
    right:0; 
} 

부정적인 오른쪽/양쪽 열의 폭의 크기에 일치해야합니다. 당신이 제공 한 것을 기반으로 한 JSFiddle example가 있습니다. 창 크기를 조정하면 창 중앙 div (창이 중앙 div보다 작아지고 왼쪽으로 정렬되는 지점까지)가 잘 유지됩니다.

이 정보가 도움이되기를 바랍니다. 그렇지 않은 경우 알려 주시면 기꺼이 도와 드리겠습니다. 행운을 빕니다!

Answer 2

당신은 media queries를 사용할 수 있습니다

@media (max-width: 600px) { 
    .example div:first-child, /* <- and add some classes to your divs */ 
    .example div:last-child{ 
    display: none; 
    } 
}