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

你有一个

.trigger.vertical * {
    height: 400px;
}

在你的CSS中，强制标题的高度为400px。

仅发生在第一个标题中，因为只有第一个标题是.trigger.vertical的子标题

Answer 2

使用Chrome检查元素显示此CSS类覆盖了20px的高度：

.trigger.vertical * {
  height: 400px;
}

我注意到IE11和Chrome 41.0.2272.118之间的布局存在很多差异，因此布局可能存在其他问题。

Answer 3

添加！重要到你的身高，这将解决它......

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

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

3 个答案: