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

你可以添加一个简单的浮点数：left;到你的.imgWrap课程。我测试了小提琴并且它有效。其他一切都保持不变。

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

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

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

Answer 2

从看你的小提琴......错位来自于imgWrap中的selectedMenuItems。是否可以删除该类并将另一个类添加到svart？这样它就会继承svart的定位，你可以用你的新类覆盖背景。

示例：

display:inline-block

Answer 3

我重写了你的大部分CSS，但保留了你想要的一切。我简化了很多CSS，并且还需要一些像.imgWrap元素那样的东西。

Fiddle

默认情况下，<div class="row">元素为block，占用其父级宽度的100％。我们可以使用它来获取<div class="svart">元素，以便在没有更多空间的情况下自动中断到下一行。我们不需要使用我们需要使用的花车margin: 0 10px 10px和display: inline-block;。

此外，我们不需要.imgWrap元素，因为我们可以将悬停状态和背景颜色移动到.active的{{1}}类;

至于您使用原始代码所遇到的问题，可能是浮动的混合，以及您必须尝试定位红色渐变和框之间间距的边距。

＆＃13;

.svart

＆＃13;

.svart {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 0 10px 10px;
  padding: 8px;
  background: black;
  border-radius: 5px;
  color: #fff;
  text-align: center;
}
.svart.active:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, darkred);
  border-radius: 5px;
  content: '';
}
.svart.active:hover:after {
  display: none;
}
.svart .inni {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

＆＃13;

Answer 4

你也可以删除div之间的空格，内联块考虑空格，检查这个https://jsfiddle.net/n5tp97ug/7/和此博客https://css-tricks.com/fighting-the-space-between-inline-block-elements/

<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完美排列（垂直）

4 个答案: