CSS 크기 조정 div를 숨기는 방법 centerd 유지

나는 Facebook 프로 그램을 개발 중이다. (나는 CSS 프로가 아니다.). iframe 캔버스는 액체입니다 (예 : 너비 100 %.CSS 크기 조정 div를 숨기는 방법 centerd 유지

응용 프로그램을 보유하는 기본 div는 500px입니다. 메인 다이에서 왼쪽과 오른쪽의 두 div가 있습니다 (아래 그림 참조). 왼쪽 및 오른쪽 div는 동일한 너비를 가져야합니다.

사용자가 브라우저 창 크기를 조정할 때 왼쪽 및 오른쪽 div가 모두 사용 가능한 공간 만 차지하도록 적절하게 크기를 조정해야하는 반면 메인 div는 고정 폭을 중심으로 유지해야합니다.

왼쪽 및 오른쪽 div에 대한 공간이없는 경우 사라져야합니다. 기본 div는 가운데에 있어야합니다.

enter image description here

당신이 도움을 주셔서 대단히 감사합니다. ,

#main{ 
    width: 500px; 
    display: inline-block; 
} 
#left, #right{ 
    width: calc(50% - 250px); 
    display: inline-block; 
}

를 따라서 : 당신은() CSS 기능을 CALC를 사용하고자하는 경우,이 문제가 해결하기 위해 상대적으로 쉽다 http://jsfiddle.net/clicker314/L77jh8ak/4/

출처

2014-12-18 Worker

</style> 
body{ 
    margin: 0px; 
    padding: 0px; 
} 
#main{ 
    width: 300px; 
    display: inline-block; 
    background: red; 
} 
#left, #right{ 
    width: calc(50% - 150px); 
    display: inline-block; 
    background: green; 
} 
@media (max-width: 400px) { 
    #left, #right{ 
    display: none; 
    } 
} 
</style> 
<body> 
<div style="text-align: center;"> 
<div id="left">1</div><div id="main">2</div><div id="right">3</div> 
</div> 
</body>

이것은 내가 지금까지 무엇을 가지고 왼쪽 및 오른쪽 div는 화면의 절반 너비에서 주요 요소의 절반을 뺀 값을 기준으로 높이를 조정합니다. 대체가 필요하면 calc() 너비 규칙 이전에 줄에 다른 '너비 :'규칙을 추가하십시오.

IE 10 이상을 포함한 모든 최신 브라우저에서 작동합니다. IE 8/9 지원을 원한다면 위에서 언급 한 두 번째 너비 규칙을 추가하십시오.

IE 8/9 지원의 경우 두 가지 옵션이 있습니다. 1. 두 옵션에 대해 정의 된 너비를 지정하십시오. 나는. #left, #right {width : 200px;} 2. 일부 JS/jQuery를 추가하여 CSS calc() 함수를 모방합니다. 옵션이

@media (max-width: 600px) { 
    #left, #right{ 
    display: none; 
    } 
    #main{ 
    width: 100%; 
    } 
}

#main 규칙 :

는 미디어 쿼리를 추가, 특정 크기의 div의를 숨기려면 (I 추가 한 600PX은 가정입니다, 당신이 좋아하는 최소한의 화면 크기를 선택). #main div가 컨테이너에서 사용 가능한 모든 공간을 차지하기를 원한다고 가정합니다.

출처

2014-12-18 17:29:34 angularPrism

멋진 것들! 나는 계산에 대해 몰랐다. 이제 나는 그것을 숨기는 법을 배워야하고 나는 괜찮습니다! 고맙습니다! – Worker

이것은 작동 예제입니다 : http://jsfiddle.net/clicker314/L77jh8ak/1/ – Worker

누가 IE8/9 =를 처리해야할지 모르겠다.) – Worker

CSS 크기 조정 div를 숨기는 방법 centerd 유지

답변

관련 문제