Flexbox - <a> 标签破坏布局答案

【问题标题】：Flexbox - <a> tag breaks layoutFlexbox - <a> 标签破坏布局
【发布时间】：2022-02-10 17:03:30
【问题描述】：

Flexbox 横幅存在问题。
当我添加一个锚标记以使整个横幅成为一个链接时，flexbox 布局会中断，我尝试将锚标记的宽度和高度设置为 100%，但这也不起作用。

html {
  height: 100%;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

#banner-section {
  background-color: #f4f4f4;
  margin: 0 auto;
  padding: 3em 1em;
}

.card {
  background-color: white;
  box-shadow: 0px 8px 14px 0px rgba(148, 148, 148, 0.35);
}

.card a:hover {
  box-shadow: 0px 16px 20px 0px rgba(148, 148, 148, 0.61);
}

.info-container1 {
  background-color: plum;
}

.info-container2 {
  background-color: pink;
}

.card-info {
  padding: 1.2em;
}

@media screen and (min-width: 40em) {
  .wrap {
    max-width: 50em;
    margin: 0 auto;
  }
  .banner {
    display: flex;
  }
  .info-container1 {
    width: 50%;
    flex: 1;
  }
  .info-container2 {
    width: 50%;
    flex: 1;
  }
}

<section id="banner-section">
  <div class="wrap">
    <article class="banner card">
      <a href="#">
        <div class="info-container1">
          <div class="card-info">
            <h2>Container 1</h2>
            <p>Lorem ipsum dolor sit amet, usu ei exerci bonorum praesent, duo cu dolorem adipiscing vituperata, in vel atomorum ocurreret. Lorem ipsum dolor sit amet etc etc... </p>
          </div>
          <!-- .card-info -->
        </div>
        <!-- .info-container -->
        <div class="info-container2">
          <div class="card-info">
            <h2>Container 2</h2>
            <p>Ea autem perfecto prodesset mea, sed case hendrerit te, tale vidit accusam ex mel.</p>
          </div>
          <!-- .card-info -->
        </div>
        <!-- .info-container -->
      </a>
    </article>
    <!-- .banner .card -->
  </div>
</section>

基本上，我需要两列的高度和宽度相等，并包裹在<a> 标记中，这样整个横幅就变成了可点击的链接。如果我删除锚标记，布局将按预期工作。
我在这里缺少什么？

【问题讨论】：

添加这个：a{display:block}

标签： html css flexbox

【解决方案1】：

带有display: flex 的元素将其子元素排列在灵活的盒子布局中。

<article> 的唯一子元素是 <a>，因此这是在弹性框中布局的唯一元素。

将链接放在文章周围。那么 div 元素将成为文章的子元素。

【讨论】：

【解决方案2】：

你可以试试这个：

<a href="#" style="display: contents;">

我遇到了类似的问题，就这样解决了。

【讨论】：