Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要在每个display: inline-block;元素上设置.classboxX，而不是其父div：

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

Answer 2

公寓而非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%;
}

...

如果您始终使用百分比大小（这是网页设计中的一个好习惯），即使调整了浏览器的大小，相对宽度也会保持不变（有一些外部限制：如果是浏览器收缩太多，内部文本不适合，并且块将扩展到几行。进行一整套测试。）

CSS Inline-block无法创建所需的效果

2 个答案: