包含2列的标记<a>中封装的<div>的链接问题

Question

当我用全局标记<a>编写这段代码时，链接id被定义并出现在鼠标所在位置的底部是没有问题的。

        <a class="link" href="opencl/toto.htm">
          <div class="enve d-flex">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
          </div>
        </a>

结果ok：

​

​

但是现在，我希望有一个覆盖所有div图片的图片链接，以及另一个覆盖第二列(description)的链接，但似乎容器(flexbox，bootstrap)有问题，我没有解决这个问题的解决方案(当鼠标悬停在图片或第二列时，这两个链接都必须出现在页面底部(就像href一样)。这样做有可能吗？

代码对结果不满意：

          <div class="enve d-flex">
            <a class="link" href="opencl/toto.htm">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            </a>
            <a class="link" href="opencl/titi.htm">
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
           </a>
          </div>

这两个链接的结果都不太好：

​

​

CSS代码(实际上是scss)

.picture{
  background-color: rgb(0, 131, 143);
  flex-shrink: 0;
  align-self: flex-start;
  width: 40%;
  position: relative;
  max-width: 270px;
  .figure{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 0;
    padding-bottom: 56.25%;
    background-size: cover;
    //background-color: #e0e0e0;
    background-position: center;
  }
}
.enve{
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  padding: 16px;
  margin-bottom: 16px;
}
.enve:hover{
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.description{
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 0 16px;
  width: 100%;
  .title{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625rem;
  }
 
}
.link{
  color:inherit;
  text-decoration: none;
  display: block;
  &:hover{
    color:inherit;
    text-decoration: none;
  }
}

.stats{
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.625rem;
  margin-bottom: 8px;
  .pstat{
    margin: 0;
    margin-right: 24px;
    .stats-icon{
      font-size: 1.5rem;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      margin-bottom: 3px;
      vertical-align: middle;
    }
  }
}

当我清除类d-flex时，结果是好的，但当然，列必须替换为行。我想要专栏..。

​

​

Answer 1

这就是了：

当您没有为元素定义最小宽度时，display flex会尝试根据需要在div中分配空间。由于a-tag是内联块，它们会自动折叠为0的宽度；作为背景图像，也不会增加左侧图像折叠的宽度。

例如，向.picture类添加一个最小宽度可以解决这个问题(百分比宽度在这里也不做任何事情)。

为了在一行而不是列中显示项目，我只向.enve容器添加了flex-direction: row (也是display-flex，因为d-flex类不能为我做这件事)。

希望这对^^有所帮助

要更深入地了解flexbox，我建议阅读以下内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

​

.picture{
  background-color: rgb(0, 131, 143);
  //flex-shrink: 0;
  align-self: flex-start;
  width: 40%;
  position: relative;
  max-width: 270px;
  min-width: 270px;
  }
  .picture .figure{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 0;
    padding-bottom: 56.25%;
    background-size: cover;
    //background-color: #e0e0e0;
    background-position: center;
  }
.enve{
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
}
.enve:hover{
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.description{
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 0 16px;
  width: 100%;
}
.description .title{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625rem;
  }
.link{
  color:inherit;
  text-decoration: none;
  display: block;
  &:hover{
    color:inherit;
    text-decoration: none;
  }
}

.stats{
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.625rem;
  margin-bottom: 8px;
}
.stats .pstat{
    margin: 0;
    margin-right: 24px;
  }
  .stats .pstat .stats-icon{
      font-size: 1.5rem;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      margin-bottom: 3px;
      vertical-align: middle;
    }

<div class="enve">
            <a class="link" href="opencl/toto.htm">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            </a>
            <a class="link" href="opencl/titi.htm">
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
           </a>
          </div>

​

Answer 2

这可能是CSS的问题，你确定你的第一个链接的大小是50%吗？

<a class="link" href="opencl/toto.htm">  <!-- This a should have a 50% width and display block -->
    <div class="picture"> <!-- This div should have a 100% width -->
        <figure class="figure" style="background-image: url('images/desert.jpg');">  <!-- This figure should have a 100% width -->
        </figure>
    </div>
</a>

此外，如果这不能解决您的问题，请记住您可以使用

onclick="window.location.href='myLink'"

Answer 3

您可以在onclick()事件中尝试此操作

<div onclick="window.location.href='https://google.com'">somediv</div>

不幸的是，链接没有出现在页面的底部。我想这只有href才有可能。