logo标签列表

如何使一个空的div占据空间？

htmlcss
7

我有两个被 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上找到。
1
顺便提一下，height="100px" 是错误的写法！正确的应该是 height="100" 或者 style="height: 100px;"。 - Armin
8个回答
6

添加：

.figure {
    vertical-align: top
}
3

应避免使用inline-block，因为IE7及更早版本不支持它。

.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/
1
你可以在IE6和IE7中使用display: inline-block，但仅适用于默认未指定display: block的元素。例如，它可以与<span />一起使用，但不能与<div />一起使用。 - vee
2
顶部的div不对齐是因为你在display: inline-block内使用了display: block元素。它们会"溢出"。
我找到了一个解决方案，通过收缩包含块元素的宽度来实现（绝对定位）：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;
}
1

不确定这是否解决了问题，但是min-height和min-width可能会起作用。

1

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

0

你的问题不在于 div 的高度 [已经正确设置 - 尝试给它一个背景颜色]，而是它的容器的高度。你只需要修复：

.figure {
height: 100px [etc]
}
0
将宽度添加到 div 中。现在仅有高度，浏览器不知道应该有多大，因此它很高但宽度为 0 像素。
0
将.figure添加float:left;，它就可以工作了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接