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

Question

这是我的960网格系统案例：

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

这是我使用作为表格结构的

元素集合。

CSS规则如下：

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

不用在意瑞典的命名方式。我希望这些 div 元素即使没有值也能显示出来。

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

就像这样，在这种情况下，这两列中都没有'Namn'和'Avn.Namn'。然而，在chrome中运行时，它们被移除，并且不再推动其他使用float:left的div按顺序排列。因此，如果我在同一div中有类别，那么这些值将被放置在错误的类别下面。

- Oldek

Answer 1

如果去掉浮动，它就起作用了。 http://jsbin.com/izoca/2/edit

使用浮动只有在某些内容存在时才能工作，例如 。

- Rito

---

另一个答案说，加上min-height会使它在浮动时正常工作，在我的情况下确实有效。如果这总是正确的（现在，即2016年），那么这个答案是错误的。你只需要添加min-height: 1px;到width: 140px;，不需要删除浮动或添加内容。 - Nick Rice

在jQuery中尝试使用element.text(" ");，然后页面上出现了 。 - Lori

Answer 2

尝试在空项中添加 。

不过，我不明白为什么你不在这里使用<table>？它们可以自动完成这种事情。

- Pekka

---

同意。如果是表格数据，就使用表格——那就是它们的用途。 - Dan Diplo

时至今日，人们仍然认为 <table> 标签是不好的。 - saluce

使用 作为空格的解决方法虽然流行，但在某些情况下可能会出现问题。例如，当您使用text-decoration: line-through;给文本添加删除线时，删除线将显示在 上，而您实际上需要的只是一个空白的div。 - Izhaki

@Pekka웃，并非总是可以“使用表格”。我遇到了同样的问题（“如何让空的<div>占据空间”），这是在响应式设计中，当宽度很短时，我将横向表格转换为纵向表格的情况。我已经在使用表格…… - ANeves

@Pekka웃 这是一个复杂的场景，用于响应式表格，其中表格组件最终会得到 display: block; 而不是 ``table-something`. 与此类似的东西：https://css-tricks.com/responsive-data-tables/ （但更好一些，我们不会在 CSS 中破解标题。）（请尝试在此演示中将窗口宽度降低：https://css-tricks.com/examples/ResponsiveTables/responsive.php） - ANeves

Answer 3

在伪元素内部添加一个零宽度空格字符即可。

.class:after {
    content: '\200b';
}

- Blowsie

---

哦，我喜欢这个想法，因为这意味着用户不会意外地复制粘贴它，伪元素默认情况下是不可选择的。 - Domino

只有在存在一个（可能为空的）'.class {}'样式时才起作用。 - undefined

Answer 4

对@no1cobla的答案进行了微调，这样可以隐藏句号。该解决方案适用于IE8+。

.class:after
{
    content: '.';
    visibility: hidden;
}

- Jonathan

---

如果你想将这段代码作为回退方案，只有在元素为空时才起作用，请添加类似于.class:after:empty的内容。 - Miguel Garrido

@Miguel Garrido - 我必须使用 .class:empty:after 才能使其工作。 - secondperson

Answer 5

解决浮动

div

为空的简单方法是添加：

• 宽度（或最小宽度）
• 最小高度

这样，您可以保持浮动功能并在空白时强制填充空间。

我在页面布局列中使用这种技术，以使每列保持其位置，即使其他列为空也是如此。

示例：

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

- Engineeroholic

---

min-height 是最优解 - Vall3y

min-height仅仅解决了width的问题。然而，它并不能防止div高度为零（尝试设置div背景以查看问题）。因此， 是一个更通用的解决方案。另外，内容：“.”可以解决高度为零的问题。 - John Henckel

min-height = 1px并不等于0！如果你想要默认高度，可以简单地设置min-height = 100px和min-width = 100px，这个div将始终是100x100，不可能为0。 - Engineeroholic

使用"&nbsp"是非常不好的做法，如果您有一个包含许多文件且每个文件都有10K个HTML行的大型网站，那该怎么办？如果我按照您的方法去做，我将不得不在每个文件中都加入"&nbsp"！这是多么浪费时间啊！如果您有一个用户生成内容的网站呢？例如，用户提交了空评论...根据您的解决方案，我必须编写代码来检查评论是否为空，然后添加"&nbsp"（为了没有好的理由而过于复杂）。min-height和min-width是最好的解决方案，因为我只需编写一次代码，就不必再担心它，即使将来添加更多内容也是如此。 - Engineeroholic

Answer 6

您可以：

o 将`.kundregister_grid_1`设置为：

- 使用`height`(或`min-height`)和`width`(或`width-min)`，或者 - 使用`padding-top`，或者 - 使用`padding-bottom`，或者 - 使用`border-top`，或者 - 使用`border-bottom`

o 或使用伪元素：`::before`或`::after`，并使用以下内容：

- `{content: "\200B";}`，或者 - `{content: "."; visibility: hidden;}`

o 或在空元素中插入` `，但这有时会带来意外的效果，例如与`text-decoration: underline;`相结合。

- simhumileco

Answer 7

这是一种方法：

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

- vothaison

---

我建议使用content: "\200b";来表示零宽度空格。另一个优点是浏览器不会选择这个字符（例如，CTRL+A CTRL+C仍然会保持原样）。 - yyny

Answer 8

 可以工作，但那不是正确的方法。我认为应该使用w min-height: 1px;

- S M Mahmodul Hassan

Answer 9

为什么不在你的CSS类中添加“min-width”属性呢？

- MrTombola

Answer 10

使用inline-block，它将表现为内联对象。因此，不需要浮动来使它们在同一行上并排。正如Rito所说，浮动需要一个“body”，就像它们需要尺寸一样。

我完全同意Pekka关于使用表格的观点。每个使用div构建布局的人都会避免使用表格，就像它是一种疾病一样。但是用它们来处理表格数据！这就是它们的目的。而在你的情况下，我认为你需要它们。

但是，如果你真的非常想要你想要的东西。有一种CSS hack的方法。与浮动hack相同。

.kundregister_grid_1:after {  content: ".";  }

添加那个，你就完成了。（注意：在IE中不起作用，但可以修复）。

- no1cobla