如何使一个空的div占用空间

这是我的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中运行时，它们将被移除，并且不再按顺序推动其他div float:left。因此，如果我在上述相同的div中具有类别，则值将置于错误的类别下。

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

使用浮点数时，仅当存在某些内容时才有效，例如  

尝试添加 到空项目。

不过，我不明白为什么您不使用<table>这里？他们将自动执行此类操作。

稍微更新为@ no1cobla答案。这隐藏了期间。此解决方案在IE8 +中有效。

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

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

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

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

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

例：

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

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

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

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

这是一种方法：

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

您可以：

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或放入 空元素内，但这有时会带来意想不到的效果，例如。与...结合text-decoration: underline;

为什么不只在CSS类中添加“最小宽度”？

  可行，但这不是正确的方式，我认为w min-height：1px;

使用inline-block时，它将充当嵌入式对象。因此不需要浮子就可以使它们在一行上彼此相邻。确实正如Rito所说，浮子需要一个“主体”，就像它们需要尺寸一样。

我完全同意Pekka关于使用表格的观点。每个使用div的回避表来构建布局的人都觉得这很麻烦。但是将它们用于表格数据！这就是他们的目的。在您的情况下，我认为您需要它们:)

但是，如果您真的很想要您想要的东西。有一种CSS破解方式。与浮动hack相同。

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

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

如果需要浮动它们，则始终可以将最小高度设置为1px，这样它们就不会崩溃。

在构建一组自定义的布局标签时，我找到了这个问题的另一个答案。这里提供了自定义的标记集及其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。