Question

你好，朋友，我是新手。我会等你的帮助。，我的项目有问题。我想将.game-tags-main div高度设置为与其旁边的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，但是CSS中没有属性display: flex;。您问了一个问题“我要从下一个img设置我的.game-tags-main div高度”。您没有将样式添加到game-tags-main div class中。

border-radius属性不需要使用很多次。如果浏览器不兼容，则曲线不会显示。总而言之，请重述此问题，因为它目前非常混乱。

Answer 2

尝试以下代码：

.games-box > div > div {
    position: relative;
}
.games-box > div .game-tags-main {
    height: 100%;
    background: red;
    position: absolute;
}
if you want .game-tags-main is full width just add Width="100%"....

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

2 个答案: