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%; 
} 

そして、ブロックを互いに隣接させたい場合：

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

次に、すべての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; 
}