html - 我如何设置下一个 img 标签的 div 高度？

Question

大家好，我是堆栈新手。我会等你的帮助。 ，我的元素有问题。我想将我的 .game-tags-main div 高度设置为与其旁边的 img 相同。

Img 高度具有响应性，因此我希望 div 高度也具有响应性。 但我不想在这个元素中使用 javaScript。 以下是我的元素的代码片段。

---

HTML

<div class="games-box">
    <div>
        <div>
            <div class="game-tags-main">
                asd
            </div>
            <img src="img/games/1.jpg" alt="">
        </div>
        <div class="head-of-games">
            <h3>Hounds Online</h3>
            <span class="button-radius">İNDİRİMDE</span>
        </div>
        <p>Grim Dawn</p>
        <div class="price">
            <span class="game-discount">325,00 ₺</span>
            <span>245,00 ₺</span>
        </div>
        <div class="add-basket">
            <a href="#" class="button-red button-radius">SEPETE EKLE</a>
            <a href="#" class="button-grey button-radius">İNCELE</a>
        </div>
    </div>
</div>

---

CSS

.games-box {
    > div {
        width:18.8%;
        float:left;
        margin:0px 0.6% 30px 0.6%;
        -webkit-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.32);
        -moz-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.32);
        box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.32);
        padding-bottom:20px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        overflow:hidden;
        .game-tags-main {
            height: calc(100%);
            background:red;
        }
        img {
            width:102%;
            margin-left:-1%
        }
    }
}

Answer 1

首先，为什么要有.games-box > div？根据 css 规则，这是不正确的。我看到您将 img 嵌套在 games-box 类中。你的标签说你应该使用 flexbox，但在你说 display:flex; 的 CSS 中没有属性。您问了“我想从下一个 img 设置我的 .game-tags-main div 高度”这个问题。您没有将样式添加到 game-tags-main div 类。

border-radius 属性没有必要多次使用。如果浏览器不兼容，曲线就不会显示。总而言之，请重述这个问题，因为它目前非常令人困惑。