Question

我无法弄清楚如何让整个弹性变速箱成为链接，而不会以某种方式弄乱内容。这对我来说很复杂，因为我在每个盒子的顶部都有一个图像。

我的flexbox设置为：

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    flex: 0 1 100%;
    margin: 0 10px 10px 0;
    border: 1px solid grey;
    box-shadow: 1px 1px 3px #888;
}

.card-content {
    padding: 10px;
}

.card-content p {
    line-height: 120%;
}

.card-header {
    position: relative;
    height: 200px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center;
    margin: 0;
    padding: 0;
    background-color: #000;
}

还有一些媒体查询：

@media all and (min-width: 50em) {
    .card {flex: 0 1 30%;}
    .card-content p {font-size: .9em;}
    .card-content a {font-size: .9em;}
}

每个盒子/卡的HTML结构：

<div class="cards">
    <div class="card">
        <div class="card-header" style="background-image: url(https://)"></div>
        <div class="card-content">
            <h3>Header</h3>
            <p>Description.</p>
        </div>
    </div>

同样，无论我在哪里放置A标签，它都会严重破坏格式化。

Answer 1

如何将整个flexbox设为链接

不要将div与.card类作为包装使用链接而是使用相同的类，其他一切都是相同的。

整张卡现在是一个链接！

  <a href="#" class="card">
        <div class="card-header" style="background-image: url(https://)"></div>
        <div class="card-content">
            <h3>Header</h3>
            <p>Description.</p>
        </div>
    </a>

添加指向整个Flexbox的链接

1 个答案: