如何使空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>

这是我的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中有类别,则值将被置于错误的类别下.

Answer 1

它可以移除浮动.http://jsbin.com/izoca/2/edit

与浮动它只有一些内容,例如  

Answer 2

尝试添加 空项目.

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

Answer 3

稍微更新@ no1cobla的答案.这隐藏了这个时期.此解决方案适用于IE8 +.

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

Answer 4

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

• 宽度(或最小宽度)
• 最小高度

这样你可以保持浮动功能并强制它在空时填充空间.

我在页面布局列中使用此技术,即使其他列为空,也要将每列保持在其位置.

例:

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

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

Answer 5

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

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