CSS内联块无法创建所需的效果(CSS Inline-block unable to create desired effect)

我正在尝试创建一个填充浏览器宽度的框网格，并使用display: inline-block pair / value很好地包装。 我是一个新手，但无论如何我没有得到理想的效果。 以下是我的代码，请帮助： 

.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> 
  
 

I am trying to create a grid of boxes that fills the browser width and wraps nicely using the display: inline-block pair/value. I'm a newbie, but in any case I am not getting the desired effect. Below is my code, please help:
 

 
 
  
  
.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> 
  
 


                
最满意答案

                
                    
                        
 公寓比display ，你必须调整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;
}
 

 然后，分配单元格之间的所有可用宽度，以便它们总和为100％： 
 
.classbox1{
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg);
    width:16%;
}

.classbox2{
    width: 25%;
}

.classbox3{
    width: 15%;
}

...
 

 如果您始终使用百分比大小 （这在网页设计中是一种很好的做法），即使浏览器被调整大小，相对宽度也将保持不变（具有一些外部限制：如果浏览器缩小太多，内部文本就会“并且这些块将传播到几行，做一套完整的测试）。 
Appart than the display, you'll have to adjust the width values.
 

First of all, I suggest you put all the common attributes together in the same descriptor:
 
.ifieds div {
    height: 282px;
    border-radius: 5px;
    background-color: #CEB5A1;
    margin-bottom: 15px;
    margin-left: 5px;
}
 

If you want the grid to spread along all the browser's width:
 
.ifieds {
    width: 100%;
}
 

And if you want the blocks to be adjacent one to another:
 
.ifieds div {
    ...
    display: inline-block;
}
 

Then, distribute all the available width between the cells, so that they sum 100%:
 
.classbox1{
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg);
    width:16%;
}

.classbox2{
    width: 25%;
}

.classbox3{
    width: 15%;
}

...
 

If you use always percentage sizes (which is a good practice in web design), even if the browser is resized, the relative widths will remain the same (with some exterme limits: if the browser is shrinked too much, the inner texts won't fit, and the blocks will spread to several lines. Make a complete set of tests).

更多推荐