代码之家 › 专栏 › 技术社区 › Selahaddin Ünügür

如何设置下一个img标记的DIV高度?

flexbox css3 css html

-1

Selahaddin Ünügür · 技术社区 · 6 年前

你好,朋友们,我是新来的。我等你帮忙。,我的项目有问题。我想把我的 .game-tags-main DIV高度与旁边的IMG相同。

img height是响应的,所以我希望div height也是响应的 . 但我不想在这个项目中使用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%
        }
    }
}

2 回复 | 直到 6 年前

Ojas Kulkarni 6 年前

首先,你为什么有 .games-box > div ?根据CSS的规则,这是不正确的。我看到你把 img 在 games-box 类。你的标签上写着你应该用 flexbox ,但在您所说的CSS中没有属性 display: flex; 。你问的问题是“我要设置我的.游戏标签,从下一个IMG的主DIV高度”。您没有将您的样式添加到 game-tags-main div class .

这个 border-radius 不需要多次使用属性。如果浏览器不兼容,曲线就不会出现。总之,请重申这个问题,因为它是,目前,非常混乱。

juzraai 6 年前

尝试此代码:

.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%"....

推荐文章

Softly · 单选按钮未按预期取值

1 年前