如何让一个空 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>

This is my set of divs, used as a table structure.

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>

Like so, in this case there's no 'Namn' and 'Avn.Namn' in the two columns. However when running this in chrome, they are removed, and do no longer push the other divs in the order float:left. So if I have categories in same divs above, then the values would be placed under wrong category.

262099 次浏览

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

我不明白你为什么不在这里使用 <table>,但是? 他们会自动做这样的东西。

它的工作原理,如果你删除浮动。 http://jsbin.com/izoca/2/edit

对于 float,它只在有一些内容(如 &nbsp;)的情况下工作

通过使用 inline-block,它将表现为一个 inline 对象。所以不需要花车把它们放在一条线上。事实上,正如里托所说,花车需要一个“身体”,就像它们需要维度一样。

我完全同意佩卡使用桌子的做法。每个使用 div 构建布局的人都避免使用表格,好像这是一种疾病。但是要将它们用于表格数据!这就是他们的目的。对你来说,我觉得你需要它们。

但是,如果你真的想要你想要的。有一个 CSS 的黑客方式。同样的浮动黑客。

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

添加一个,你也设置。(注意: 不在 IE 中工作,但这是可以修复的)。

为什么不直接在 css 类中添加“ min-width”呢?

稍微更新到@no1cobla 回答。这样隐藏了句点。这个解决方案在 IE8 + 中工作。

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

如果它们需要浮动,您可以将 min-height 设置为1px,这样它们就不会崩溃。

漂浮着 div 的一个简单解决方案是添加:

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

this way you can keep the float functionality and force it to fill space when empty.

我在页面布局列中使用这种技术,即使其他列是空的,也要保持每个列在其位置上。

例如:

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


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

但这不是正确的方式 我觉得 最小高度: 1px;

这是一种方式:

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

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

超文本标示语言

<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 }

这里的关键是盒子大小和填充。

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

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

你可以:

O .kundregister_grid_1设置为:

  • width(或 width-min)与 height(或 min-height)
  • padding-top
  • padding-bottom
  • border-top
  • border-bottom

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

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

O 或者将 &nbsp;放在空元素中,但是这有时会带来意想不到的效果,例如与 text-decoration: underline;结合

它通过设置 div 类 row 和 style = display: table-row 为我工作

尝试将 display: list-item添加到类中