Question

我有10个正方形浮动，并在一个包装中。我将每个方块包裹在一个锚标签中，以便我可以链接方块。

所以我有一个包装器，里面有10个这样的元素：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

前5个方块显示为楼梯，剩下的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;
}

以下是结果

enter image description here

为什么我的浮动元素显示为＆＃34;楼梯＆＃34;？

1 个答案: