Question

我有两个用div包裹的图像，一个带有标题，另一个没有：

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
  <div class="caption">title</div>
</div>

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
 <div class="caption"></div>
</div>

相应的css如下：

.figure {
    display: inline-block;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

我的问题是，即使我已将高度属性分配给字幕div，它仍然不占用空间，因此图像的顶部不对齐。有没有解决这个问题？问题代码也可在http://cssdesk.com/cF7G9处获得。

Answer 1

添加：

.figure {
    vertical-align: top
}

Answer 2

您应该避免使用内联阻止，因为EI7及更早版本不支持它。

.figure {
    float: left;
    width:100px;
    margin-right: 10px;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

对于任何块容器，设置一个特定的宽度float: left，它们将像魅力一样排列。

正如您在此处所见：http://jsfiddle.net/zalun/E4mz9/

Answer 3

由于display: block内有display: inline-block个元素，因此顶部div不对齐。他们正在“溢出”。

我在这里得到了一个解决方案，通过收缩包装（绝对定位）来夹住所包含的块元素的宽度：http://cssdesk.com/jAV8S

.figure {
    display: inline-block;
    height: 120px;
    width: 130px;
    background: green;
    position: relative;
}
.figure .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: red;
}

Answer 4

在div中放置 这将插入一个空格。当元素内部绝对没有内容时，某些浏览器将不允许它在水平或垂直方向占用任何空间。

Answer 5

不确定这是否解决了问题，但最小高度和最小宽度可能有效。

Answer 6

为div添加宽度。现在它的唯一高度，浏览器不知道它应该是如此高但是0px宽

Answer 7

向float:left;添加.figure即可。

Answer 8

你的问题不是div的高度[正确设置 - 尝试给它一个背景颜色]但是它的容器的高度。您需要解决的是：

.figure {
height: 100px [etc]
}

即使它是空的，如何使div占用空间？

8 个答案: