如何使一个空的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中运行时，它们被删除，不再按照float:left的顺序推送其他div。 所以如果我在上面有同样的divs中的类别，那么这些值将被置于错误的类别中。
它可以工作，如果你删除浮动。 http://jsbin.com/izoca/2/edit
如果有一些内容，例如
尝试添加 到空的物品。
我不明白你为什么不在这里使用<table>呢？ 他们会自动做这种东西。
轻微更新到@ no1cobla答案。 这隐藏了这个时期。 此解决scheme在IE8 +中工作。
.class:after { content: '.'; visibility: hidden; }
空白浮动 div的简单解决scheme是添加：
- 宽度（或最小宽度）
- 最小高度
这样，你可以保持浮动function，并强制它填满空间。
我在页面布局列中使用这种技术，即使其他列是空的，也可以保持每一列都处于其位置。
例：
.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; }
通过使用内联块，它将performance为内联对象。 所以不需要漂浮在一条线上把它们放在彼此旁边。 事实上，正如Rito所说，漂浮物需要一个“身体”，就像他们需要的尺寸一样。
我完全同意佩卡关于使用表格。 每个使用div避免表格构build布局的人都是这样的。 但是将它们用于表格数据！ 这就是他们所要求的。 而在你的情况下，我认为你需要他们:)
但如果你真的想要什么你想要的。 有一个CSS的黑客方式。 同浮法黑客一样。
.kundregister_grid_1:after { content: "."; }
添加一个，你也设置：D（注意：在IE中不起作用，但这是可以修复的）
为什么不把“最小宽度”添加到你的CSS类？
如果他们需要浮动，你总是可以设置最小高度为1px，所以他们不会崩溃。
作品，但这是不正确的方式，我认为瓦最小高度：1px;
在构build一组自定义的布局标签时，我发现了另一个这个问题的答案。 这里提供的是自定义标签集及其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 }
这里的关键是盒子大小和填充。
您可以：
设置为.kundregister_grid_1 ：
-
width（或width-min）与height（或min-height） - 或
padding-top - 或
padding-bottom - 或
border-top - 或
border-bottom
或者使用伪元素 ::before或::after with：
-
{content: "\200B";} - 或
{content: "."; visibility: hidden;}{content: "."; visibility: hidden;}。
或者放入 里面有空的元素，但这有时会带来意想不到的效果，比如。 结合text-decoration: underline;
