javascript - div 中 HTML/CSS 标题的简单编码问题

Question

有人可以看看我网页的这个实时链接吗？我的布局 div 中每个 div 的右上角都有一个标题，但是我有一个水平框(第一个)，其中标题延伸到 div 的底部，而不是只有 20px 的高度。我一直在搜索这段代码，但我不明白为什么。

提前致谢

HTML

 <div class="col">
    <div class="trigger vertical img1">
        <div tabindex="0" class="maincontent">
            <div class="slider static">
                <div class="just_text">
                    <div class="caption-box">Caption</div>
                    <img src="slide1.png" height="400" width="200" />
                </div>
                <div class="just_text">
                    <div class="caption-box">Caption</div>
                    <img src="slide2.png" height="400" width="200" /></div>
                <div class="just_text">
                    <div class="caption-box">Caption</div>
                    <img src="slide3.png" height="400" width="200" /></div>
                <div class="just_text">
                    <div class="caption-box">Caption</div>
                    <img src="slide4.png" height="400" width="200" /></div>
            </div>
        </div>
    </div>
</div>

CSS

.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}

Answer 1

将 !important 添加到您的高度，这将解决它...

.caption-box {
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}