왜 인라인 블록과 최대 너비가 함께 작동하지 않습니까?

Question

CSS/HTML 학습을 시작했습니다. 나는 교육 목적으로 사이트를 만들고있다. 나는 또한 설명하기에 끔찍해서 이해하기를 바랍니다.

사이트 : 나는 BOX1의 최대 폭을 만들기 위해 노력하고 http://66.172.10.179/resolver/

300 픽셀이어야합니다. 다음과 같은 상자를 만들고 싶습니다.

display : inline-block을 제거하면 어떤 이유인지 알 수 있습니다. 그것은 다음과 같습니다

내가 인라인 블록을 유지하는 경우; 너비가 작동하는 너비로 최대 너비를 변경하지만 문제는 입니다. 화면 크기에 따라 상자의 크기가 조정되지 않습니다.

CSS :

이

.stats { 
    padding: 15px; 
} 

.box1 { 
    background-color: blue; 
    width: 300px; 
    display: inline-block; 
    padding: 10px; 
} 

.icon { 
    font-size: 50px; 
    color: white; 
    display: inline; 
} 

.text { 
    float: right; 
    display: inline; 
} 

HTML :

이

<section class="stats"> 
     <div class="box1"> 
      <div class="icon"> 
       <i class="fa fa-hdd-o"></i> 
      </div> 
      <div class="text"> 
       <p>123</p> 
       <p>Servers</p> 
      </div> 
     </div> 

Answer 1

max-width 속성은 특정 폭을 의미하지는 않습니다. 대신 width 속성의 가능한 값을 제한합니다.

표시를 inline-block으로 설정하면 특정 너비가 아니지만 block (이는 <div> 요소의 기본값 임)은 100 % 너비를 의미합니다.

질문에 대답하려면 max-width과 inline-block이 함께 작동해야합니다.

목표가 브라우저 너비 이상으로 커지는 것을 막으려는 경우 max-width: 100%이 필요합니다.