Question

我正在尝试连续显示带有翻转图像的多个链接，这使图像错开。我试过添加clear：left;到css代码，它只是使图像堆叠在一起。有人可以帮我弄清楚如何让这些链接图像连续显示而不会错开？谢谢!!

HTML：

#iconwrap {
  white-space: nowrap;
}
.CasinoLink {
  display: inline;
  width: 279px;
  height: 237px;
  text-decoration: none;
  background: url('http://placekitten.com/300/300');
  float: left;
  margin: 0 5px 0 5px;
}
.CasinoLink:hover {
  background-position: -279px 0;
}
.CorpLink {
  display: inline;
  width: 279px;
  height: 237px;
  text-decoration: none;
  background: url('http://placekitten.com/300/300');
  float: left;
  margin: 0px 5px 0 5px;
}
.CorpLink:hover {
  background-position: -279px 0;
}

<div id="iconwrap">
  <a class="CasinoLink" href=""></a>
  <a class="CorpLink" href=""></a>
</div>

Answer 1

尝试类似：

CSS

.image-outer-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto;
  position: relative;
}
.image-outer-wrapper:before,
.image-outer-wrapper:after { content: " "; display: table;}
.image-outer-wrapper:after {clear: both;}

  .image-outer-wrapper .image-wrapper {
    margin: 0 5px 0 5px;
    position: relative;
    float: left;
    width: 279px;
    height: 237px;
    text-decoration: none;
}

  .image-outer-wrapper .image-wrapper.CasinoLink {
    background: url('http://placehold.it/279x237');
    background-position: 0 0;
  }
  .image-outer-wrapper .image-wrapper.CorpLink {
    background: url('http://placehold.it/279x237');
    background-position: 0 0;
  }

  .image-outer-wrapper .image-wrapper:hover {
    background-position: -279px 0;
  }

HTML

  <div class="image-outer-wrapper">
    <div class="image-wrapper CasinoLink"></div>
    <div class="image-wrapper CorpLink"></div>
  </div>

请参阅此处了解EG：http://codepen.io/simondavies/pen/VaRBMo

Row Staggered

1 个答案: