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

比display Appart酒店，你」必須調整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

您需要設置display: inline-block;各.classboxX元素上，而不是他們的父母div：

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