使div框成為錨點-如何保持div框的屬性-有解無憂

我做了一個里面有容器和 4 個盒子的部分（帶有行方向的 flexbox）。一切都準備好了。現在我想讓這 4 個框可點擊并將它們設定為錨點。不幸的是，當我將盒子裝入 . 我應該改變我的，還是讓我的盒子作為錨點的更好方法？謝謝您的回復

.icon-boxes {
  display: flex;
  flex-wrap: no-wrap;
  margin: 0 -15px;

  :hover {
    background-color: #ffede9;
  }

  a {
    text-decoration: none;
    color: #000;

    .box {
      width: calc(100% / 3);
      padding: 15px 15px;

      @media (max-width: 800px) {
        width: 100%;
      }

      .icon {
        margin-bottom: 20px;
        text-align: center;
        font-size: 60px;
      }

      .title {
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 1px;
        font-weight: 600;
      }

      .desc {
        text-align: center;
        line-height: 1.4;
        color: $secondaryColor;
      }
    }
  }
}

            <div class="icon-boxes">
                <a href="">
                    <div class="box">
                        <div class="icon"><img src="assets/img/wedding-invitation.png" alt=""></div>
                        <div class="title">Lorem</div>
                        <div class="desc">Lorem</div>
                    </div>
                </a>
             </div>

uj5u.com熱心網友回復：

您可以通過使用一些 javascript 來實作這一點。它將保留所有 div 屬性，您將不需要錨點。

var d1 = document.getElementById("d1")
d1.addEventListener("click",function(){
   window.open("https://www.google.com" ,'_blank');
})

.d1{
width:100px;
height:100px;
background-color:crimson;
}

<div class="d1" id="d1"> </div>

uj5u.com熱心網友回復：

將它們單獨包裝，如下所示

 <a href="https://www.w3schools.com/js/default.asp">
             <div class="title">Lorem</div>
       </a>

.title {
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 20px;
      letter-spacing: 1px;
      font-weight: 600;
      width:300px;
      height:200px;
      border:5pt double black;
      background-color:pink;
    }
    
    .desc {
        text-align: center;
        line-height: 1.4;
         width:200px;
         height:200px;
      border:5pt double black;
      }

<div class="icon-boxes">
      <div class="box">
           <div class="icon"><img src="assets/img/wedding-invitation.png" alt=""></div>
           <a href="https://www.w3schools.com/js/default.asp">
                 <div class="title">Lorem</div>
           </a>
           <a href="https://www.w3schools.com/js/default.asp">
                 <div class="desc">Lorem</div>
           </a>
                 
      </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377801.html

標籤：html css

上一篇：容器中按鈕放置的CSS問題

下一篇：如何在Angular中使用JSON資料？