css 작은 창에 맞게 div 컨테이너를 조정

Question

내 문제는 작은 크기의 창이나 창 크기가 줄어들 때 컨테이너 크기가 조정되지 않는다는 것입니다. 내가 높이/너비를 100 % 또는 50 %로 설정 한 백분율 방법을 시도했지만 컨테이너가 사라졌습니다. 이것에 주를 보내고 난 후에, 나는 절대적으로 어디에도 가지 않고 있었다. 이 여기에.

.ca-container{ 
position:relative; 
margin:-45px auto 20px auto; 
width:990px; 
height:500px; 
} 

.ca-wrapper{ 
width:100%; 
height:100%; 
position:relative; 
} 

.ca-more{ 
position: absolute; 
bottom: 10px; 
right:0px; 
padding:4px 15px; 
font-weight:bold; 
background: #000; 
text-align:center; 
color: white; 
font-family: "Georgia","Times New Roman",serif; 
text-shadow:1px 1px 1px #897c63;  
} 

.ca-item{ 
position:relative; 
float:left; 
width:330px;  
height:100%; 
text-align:center; 
} 

.ca-item-main{ 

padding:20px; 
position:absolute; 
top:5px; 
left:5px; 
right:5px; 
bottom:5px; 
background:#fff; 
overflow:hidden; 
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
} 

에 내 머리를 구동뿐만 아니라 IE6를 지원하기위한 요구 사항, 내 웹 페이지의 HTML입니다. 나는 원래 플러그인을하지 않습니다 실현 http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

: 나는

 <div class="container">     
      <div></div> 
      <div id="ca-container" class="ca-container"> 
       <div class="ca-wrapper"> 
        <div class="ca-item ca-item-1"> 
         <div class="ca-item-main"> 
          <div class="ca-icon"></div> 
          <h3></h3> 
          <h4></h4> 
          <a href="#" class="ca-more">Read...</a> 
         </div> 
         <div class="ca-content-wrapper"> 
          <div class="ca-content"> 
           <h6></h6> 
           <a href="#" class="ca-close">close</a> 
           <div class="ca-content-text"> 
            <p>xxxxxxxx </p> 

           </div> 
          </div> 
         </div> 
        </div> 

원래 플러그인이 원형 내용 회전 목마입니다 (I 내에서 콘텐츠를 삭제했습니다) 그냥 첫 번째 항목의 구조를 보여 절단 한 그. 코드가 너무 복잡하면 플러그인을 확인하고 데모 소스로 문제를 해결하십시오.

도움이 될 것입니다 - 고마워요!

Answer 1

미디어 쿼리를 보았습니까? http://www.w3.org/TR/css3-mediaqueries/

다른 크기의 화면에 대해 다른 CSS를 사용할 수 있습니다. 여기에 현재 인터넷에 대한 많은 정보가 있습니다.