Question

我有一个无序列表root:www-data，其中每个li都是浮动的，但由于将ul li设置为列表项而具有高度值。

因此，当将元素悬停在webinspector中时，list-item的高度值明显为288px。

在每个overflow:hidden;中，我还有一个li，其中包含以下属性：

＆＃13;

div.caption

＆＃13;

.caption {
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 101%;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  display: table;
}

＆＃13;

由于li中图像的高度，上面提到的列表项的高度是自动的。（webinspector清楚地显示列表项具有高度）

然而，li中的<li> <a href="#"><img src="#"></a> <div class="caption">some more elements in here</div> </li> div不会自动与父级一样高。我希望.caption与列表项一样高100％。

我可以在这做什么？

示例：http://jsfiddle.net/rgwcL8qt/1/叠加层应始终覆盖整个图像。

Answer 1

尝试添加

<div style="clear: both"></div>

在包含.caption类的div的末尾。

Answer 2

添加div.caption {bottom:0; display:block;}

Fiddel

Answer 3

带有div.caption { display: table }的

div.caption-in { display: table-cell }会创建一个新的块格式化上下文。

更改为div.caption { display: block; }可以解决您的问题。

编辑：如果您需要将内容集中在字幕div中，那么您应采取不同的方法：

.caption:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.3em;
}
.caption {
    opacity: 0;
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 101%;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    display: block;
    cursor: pointer;       
}
.caption-in {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/vmg8jfed/

CSS：div with display：table;在列表元素内没有自动高度？

3 个答案: