Почему мои плавающие элементы отображаются как «лестницы»?

Question

У меня есть 10 квадратов, которые плавают, и в обертке. Я обертываю каждый квадрат тегом привязки, чтобы связать квадраты.

Итак, у меня есть обертка, и внутри у меня есть 10 из этих элементов:

.square {
  float: left;
  width: calc(20% - 16px);
  padding-bottom: calc(20% - 16px);
  overflow: hidden;
  background-image: url(myimg.jpg);
  border-radius: 5%;
  background-size: cover;
  position: relative;
  z-index: 10;
  margin: 8px;
  transition: ease all .3s;
  color: rgb(255, 230, 20);
}

.content {
  position: absolute;
  width: 88%;
  height: 89%;
  top: 6%;
  left: 6%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

<div class="productsWrap">
  <a href="mylink.com">
    <div class="square">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </div>
  </a>
  //and then ten more of the same anchor tags
</div>

Первые 5 квадратов отображаются как лестницы, а оставшиеся пять во втором ряду отображаются правильно.

Answer 1

Проблема в том, что вы плаваете .square элемент, но ожидаете, что .content будет плавающим. Вот ответ:

Улучшенный HTML

<div class="productsWrap">
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>
  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>

  <div class="square">
    <a href="mylink.com">
      <div class="content content1">
        <span class="squareTitle">Bending</span>
      </div>
    </a>
  </div>

</div>

Улучшенный CSS

.square {
  float: left;
  width: calc(20% - 16px);
  padding-bottom: calc(20% - 16px);
  overflow: hidden;
  background: #f00;
  border-radius: 5%;
  background-size: cover;
  position: relative;
  z-index: 10;
  margin: 8px;
  transition: ease all .3s;
  color: rgb(255, 230, 20);
}

.square a {
  color:yellow;
}

.content {
  position: absolute;
  width: 88%;
  height: 89%;
  top: 6%;
  left: 6%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

А вот и результат

введите описание изображения здесь