Flex布局下双<a>标签包裹两列内容的链接问题求助

我懂你的困扰：原本用单个<a>包裹整个Flex容器时，布局和链接功能都正常，但拆分出两个独立<a>分别包裹.picture和.description后，Flex布局直接崩了。核心原因是**.enve的直接子元素从.picture/.description变成了<a>标签**，而你原来的SCSS样式是针对.picture和.description设置的Flex属性，完全没作用到新的直接子项上。

下面是具体的修复方案，保证布局和链接功能都正常：

步骤1：微调HTML结构 #

给两个<a>标签分别加上专属类名，方便我们精准设置Flex样式：

<div class="enve d-flex">
  <a class="link picture-link" href="opencl/toto.htm">
    <div class="picture">
      <figure class="figure" style="background-image: url('images/desert.jpg');"></figure>
    </div>
  </a>
  <a class="link description-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>

步骤2：修改SCSS样式，让<a>成为合格的Flex子项 #

把原来.picture和.description的Flex布局属性，转移到对应的<a>标签上，同时保留内部元素的原有样式：

.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布局生效，如果你用Bootstrap的d-flex也可保留 */
}

.enve:hover{
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/* 给包裹picture的a设置Flex布局属性 */
.picture-link{
  flex-shrink: 0;
  align-self: flex-start;
  width: 40%;
  max-width: 270px;
  position: relative;
}

.picture{
  background-color: rgb(0, 131, 143);
  width: 100%;
  .figure{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 0;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
  }
}

/* 给包裹description的a设置Flex布局属性 */
.description-link{
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 0 16px;
  width: 100%;
}

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

方案说明 #

• 现在.enve的直接子元素是.picture-link和.description-link这两个<a>标签，我们给它们设置了和原来.picture/.description一致的Flex属性，确保两列能正常并排布局。
• 保留了内部元素的原有样式，显示效果和之前完全一致。
• 两个<a>都是块级元素，鼠标悬停对应列的任意区域时，浏览器底部都会显示对应的链接地址，完全满足你的需求。

测试一下这个方案，你会发现Flex布局恢复正常，同时两个列分别绑定了独立的链接，悬停时地址栏也能正确显示对应URL。

内容的提问来源于stack exchange，提问作者Frenchy