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

【问题标题】：How to make an empty div take space?如何让一个空的 div 占据空间？
【发布时间】：2011-03-25 21:25:23
【问题描述】：

这是我的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>

这是我的一组 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 中有类别，那么这些值将被放置在错误的类别下。

【问题讨论】：

标签： css html

【解决方案1】：

如果您删除浮动，它会起作用。 http://jsbin.com/izoca/2/edit

只有在有一些内容时才可以使用浮动，例如&nbsp;

【讨论】：

另一个答案说，设置一个最小高度将使它在浮动时工作，当然在我自己的情况下是有效的。如果这总是正确的（现在，在 2016 年），那么这个答案是错误的。您可以添加 min-height: 1px;到宽度：140px；无需删除浮动或添加内容。
在 jQuery 中尝试了 element.text("&nbsp;"); 并且 &nbsp; 出现在页面上。

【解决方案2】：

尝试将&nbsp; 添加到空项。

我不明白你为什么不在这里使用<table>？他们会自动做这种事情。

【讨论】：

同意。如果是表格数据，请使用表格 - 这就是它们的用途。
经过这么长时间，人们仍然认为<table> == BAD。
使用&nbsp;，尽管它是流行的解决方案，但在某些情况下可能会导致问题。就像当您删除 (text-decoration: line-through;) 文本时，笔划将显示在 &nbsp; 上，而您真正想要的只是一个空白 div。
@Pekka웃，并不总是可以“使用表格”。对于响应式设计，我有同样的问题（“如何让空的 div 占据空间”），当宽度很短时，我将水平表变成垂直表。 我已经在使用表格...
@Pekka웃 对于响应式表格来说，这是一个复杂的场景，表格组件最终会得到display: block; 而不是“table-something”。有点类似于：css-tricks.com/responsive-data-tables（但更好一点，我们不会破解 CSS 中的标题。）（尝试在此演示中降低窗口宽度：css-tricks.com/examples/ResponsiveTables/responsive.php）

【解决方案3】：

对@no1cobla 答案的轻微更新。这隐藏了期间。此解决方案适用于 IE8+。

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

【讨论】：

如果您想在元素为空时将其用作后备工作，请添加类似：.class:after:empty
@Miguel Garrido - 我必须使用 .class:empty:after 才能工作。

【解决方案4】：

只需在伪元素内添加一个零宽度空格字符

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

【讨论】：

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

【解决方案5】：

空浮动 div 的简单解决方案是添加：

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

这样您可以保留浮动功能并在为空时强制它填充空间。

我在页面布局列中使用了这种技术，即使其他列是空的，也可以将每一列保持在其位置。

示例：

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

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

【讨论】：

min-height 是最好的解决方案
最小高度 only 解决了 width 的问题。但是，它不会阻止 div 的高度为零。（尝试设置 div 背景来查看问题）。因此是一个更通用的解决方案。还有内容：“。”修复零高度问题。
最小高度 = 1px 不等于 0！它将是 1 px，如果你想要默认高度，你可以简单地说 min-height = 100px 和 min width = 100px，div 将永远是 100x100 不可能是 0
并且使用“&nbsp”是非常糟糕的做法，如果您有一个包含许多文件的大网站并且每个文件有10K html 行怎么办？如果我遵循您的方法，我最终会在每个文件中的每个文件中添加“&nbsp”！多么浪费时间！？如果您有一个用户生成的内容网站怎么办？例如用户提交空评论..根据您的解决方案我必须构建一个代码来检查评论是否为空，然后添加“&nbsp”（没有充分理由过于复杂）min-height 和 min-width 是最好的解决方案，因为我会写一次，不会再担心了，即使我将来添加更多内容

【解决方案6】：

你可以：

o 将.kundregister_grid_1 设置为：

width（或width-min）与height（或min-height）
或padding-top
或padding-bottom
或border-top
或border-bottom

o 或使用 伪元素：::before 或 ::after 与：

{content: "\200B";}
或{content: "."; visibility: hidden;}

o 或将&nbsp; 放在空元素内，但这有时会带来意想不到的效果，例如。结合text-decoration: underline;

【讨论】：

【解决方案7】：

这是一种方式：

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

【讨论】：

我推荐content: "\200b";zero width space。另一个好处是浏览器不会选择这个字符（例如CTRL+A CTRL+C 的行为仍然相同）。

【解决方案8】：

为什么不直接在你的 CSS 类中添加“min-width”？

【讨论】：

【解决方案9】：

有效，但这不是正确的方法我认为 w 最小高度：1px;

【讨论】：

【解决方案10】：

如果它们需要浮动，您总是可以将最小高度设置为 1px，这样它们就不会塌陷。

【讨论】：

【解决方案11】：

使用 inline-block 它将表现为一个内联对象。所以不需要花车让它们在一条线上彼此相邻。事实上，正如 Rito 所说，花车需要一个“身体”，就像它们需要尺寸一样。

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

但是如果你真的想要你想要的。有一种 CSS hack 方式。与浮动 hack 相同。

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

添加那个，你也设置好了。（注意：在 IE 中不起作用，但可以修复）。

【讨论】：

【解决方案12】：

通过设置 div class row 和 style=display:table-row 对我有用

【讨论】：

【解决方案13】：

在构建一组自定义布局标签时，我找到了这个问题的另一个答案。此处提供的是自定义标签集及其 CSS 类。

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>
   
   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

这里的关键是 Box-Sizing 和 Padding。

【讨论】：