Question

我有一堆具有一些CSS样式属性的inline-block DIV ：:

.main {
    width:100%;
    box-sizing:border-box;
}

.item-cont {
    display:inline-block;
    padding:20px;
}

.item {
    width:100%;
    max-width:250px;
    min-width:200px;
    margin-bottom:5px;
}

.item-cap {
    background:white;
    padding:5px 10px;
    color:dimgray;
    font-weight:normal;
    float:left;
}

.item-act {
    float:right;
    margin-right:20px;
    background:goldenrod;
    color:white;
    padding:5px 10px;
}

.item-act-rep {
    font-weight:normal;
    background:white;
    color:gray;
}

.item-act-save {
    margin-right:initial;
}

<div class="main">
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            <div class="item-cont">
                <img class="item" src="1.gif"><br>
                <a class="item-cap" href="#">#catch</a>
                <a class="item-act item-act-save" href="#">Save</a>
                <a class="item-act item-act-like" href="#">Like</a>
                <a class="item-act item-act-rep" href="#">Report</a>
            </div>
            **and so on ***
        </div>

这是我的浏览器显示的内容：

Screenshot

第一行似乎缺少DIV。我试图通过更改不同元素（容器，图像，主体等）的大小来编辑CSS代码，但找不到如何使其工作...我该如何解决？

Answer 1

由于提供的代码运行良好，我想页面上的其他内容会破坏您的标记。您可以尝试像下面这样“替代”这种副作用切换.main显示属性：

.main {
  display: flex;
  flex-wrap: wrap;
    width:100%;
    box-sizing:border-box;
}

.item-cont {
  min-width: 25%;
    display:inline-block;
    padding:20px;
}

...

但是您最好检查一下CSS代码中的最初问题。

为什么第一行DIV缺少DIV？

1 个答案: