html - 我无法让我的 div 完美排列(垂直)

Question

编辑:通过在叠加层中添加 margin-bottom 来实现。

我无法让我的 div 完美排列，这是它的屏幕截图:

.imgWrap {
    position:relative; 
    display:inline-block;
    opacity: 0.85;
        }
.imgWrap img {
    display:block;
    margin-left: 25px;
        }
.imgWrap:after {
    content:""; 
    position:absolute;
    top:0; left:0; bottom:0; right:0;
    background:linear-gradient(transparent, darkred);
    margin-left: 50px;
        }
.imgWrap:hover:after {
    display:none;
    margin-left: 50px;
        }
        .svart{
    width: 150px;
    height: 150px;
    float:left;
    color: white;
    background-color: black;
    border-radius: .2em;
    margin-left: 50px;
    border: 1px solid #777;
    text-align: center;
    margin-bottom: 10px;
}

img.inni{
    height: auto;
    max-width: 100px;
    width: 100px;
    height: 100px;
}

<div class="svart"><img class="inni" src="https://rocket-league.com/content/media/items/avatar/220px/9ec68cc6081481151513.png">
                 <p>1 key</div>

             <div class="svart"><img class="inni" src="https://rocket-league.com/content/media/items/avatar/220px/e3a37efb651475612008.png">
                 <p>7 cases // 1 key</div>

             <div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/2aa4fb89721474239225.png">
                 <p>3 cases // 1 key</div>

             <p>
             <div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/5975237f541474239197.png">
                 <p>7 cases // 1 key</div>

             <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/75e8bb7e5d1473412157.png"><p>2 keys</div></div>

             <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com/content/media/items/avatar/220px/8d04eb69ff1473412255.png"><p>1 key</div></div>

             <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/7bd39778fe1473412354.png"><p>1 key</div></div>

              <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/fa26b845f91473412371.png"><p>1 key</div></div>

              <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com//content/media/items/avatar/220px/97eb34e7631475683880.png"><p>1-2 keys</div></div>

             <div class="imgWrap"><div class="svart"><img class="inni" src="https://rocket-league.com/content/media/items/avatar/220px/6db50395201481302229.png"><p>7-8 keys</div></div>

我尝试过的事情:

我将红色覆盖到 div svart 的高度 150px，但这只会让 1 个图标位置空白。 https://jsfiddle.net/n5tp97ug/

Answer 1

您可以添加一个简单的 float:left;到你的 .imgWrap 类。我测试了 fiddle 并且它有效。其他一切都保持不变。

.imgWrap {
    position:relative; 
    display:inline-block;
    opacity: 0.85;
    float:left;
        }

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

这是一个解释 float 如何工作的好网站: https://developer.mozilla.org/en-US/docs/Web/CSS/float