CSS 인라인 블록이 원하는 효과를 만들 수 없습니다.

Question

브라우저 너비를 채우고 display: inline-block 쌍/값을 사용하여 멋지게 줄 바꿈하는 상자 그리드를 만들려고합니다. 나는 초보자지만, 어쨌든 나는 원하는 효과를 얻지 못하고있다. 다음은 내 코드입니다, 도와주세요 :

.ifieds{ 
 
    display: inline-block; 
 
    width: 660px; 
 
} 
 

 
.classbox1{ 
 
    width:361px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox1 > p{ 
 
    margin: auto; 
 
} 
 

 
.classbox2{ 
 
    width:660px; 
 
    height:283px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox3{ 
 
    width:359px; 
 
    height:279px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox4{ 
 
    width:459px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox5{ 
 
    width:361px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
}

<!--html codes--> 
 
<div class="ifieds"> 
 
    <div class="classbox1">Jobs</div> 
 
    <div class="classbox2">Cars and Vehicle</div> 
 
    <div class="classbox3">Apartment Rental</div> 
 
    <div class="classbox4">Houses for Sale</div> 
 
    <div class="classbox5">Pro Services</div> 
 
</div>

Answer 1

아파트, 당신 ' width 값을 조정해야합니다. 모든

첫째, 당신이 같은 설명에 모두 함께 공통 속성을 넣어 제안 :

.ifieds div { 
    height: 282px; 
    border-radius: 5px; 
    background-color: #CEB5A1; 
    margin-bottom: 15px; 
    margin-left: 5px; 
} 

당신이 그리드는 모든 브라우저의 폭을 따라 확산 할 경우

.ifieds { 
    width: 100%; 
} 

을 그리고 블록을 서로 인접하게하려면 다음을 수행하십시오.

그런 다음 모든 ava 세포 사이의 ilable 너비가 100 % 합계 있도록 : 당신은 항상 브라우저의 크기가 변경되는 경우에도 (웹 디자인에 좋습니다) 비율 크기를 사용하는 경우

.classbox1{ 
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg); 
    width:16%; 
} 

.classbox2{ 
    width: 25%; 
} 

.classbox3{ 
    width: 15%; 
} 

... 

, 상대 폭 것 브라우저가 너무 많이 축소되면 내부 텍스트가 적합하지 않으며 블록이 여러 줄로 확산됩니다. 완전한 테스트 세트를 만드십시오).

Answer 2

당신은 각 .classboxX 요소에 display: inline-block;를 설정할 필요가 아닌 부모 div 다음 display보다

.ifieds > div { 
    display: inline-block; 
}