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

Answer 1

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

使用花车只有在有些内容的情况下才有效。  

Answer 2

尝试将 添加到空项目中。

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

Answer 3

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

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

Answer 4

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

宽度（或最小宽度）
min-height

通过这种方式，您可以保持浮动功能并在空时强制它填充空间。

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

示例：

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

Answer 5

只需在伪元素

中添加零宽度空格字符

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

Answer 6

这是一种方式：

{{1}}

Answer 7

有效，但这不是正确的方法我认为w min-height：1px;

Answer 8

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

我完全同意Pekka关于使用表格的看法。使用div构建布局的每个人都避免使用类似于表格的表格。但是将它们用于移动数据！这就是他们的目标。在你的情况下，我认为你需要它们:)

但如果你真的想要你想要的东西。有一种css hack方式。与浮动黑客相同。

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

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

Answer 9

为什么不在你的css-class中添加“min-width”？

Answer 10

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

Answer 11

你可以：

设为.kundregister_grid_1：

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

或者使用伪元素：::before或::after：

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

或者将 放在空元素中，但这有时会带来意想不到的效果，例如。与text-decoration: underline;

结合使用

Answer 12

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

Answer 13

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

如何使空div占用空间

13 个答案: