Flexbox 横幅出现问题。
当我添加一个 anchor 标记使整个横幅成为 flex 盒布局中断的链接时,我尝试将 anchor 标记的宽度和高度设置为 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>
中标记,以便整个横幅成为可点击的链接。如果我删除 anchor 标记,布局将按预期工作。我在这里缺少什么?
最佳答案
带有 display: flex
的元素将它的 child 安排在一个灵活的盒子布局中。<article>
唯一的 child 是 <a>
所以这是 flex 框中唯一布局的元素。
将链接放在文章周围。然后 div 元素将成为文章的子元素。
关于html - Flexbox - <a> 标签破坏布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42970452/