Html 如何让一个空的div占据空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3416454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an empty div take space
提问by Oldek
This is my 960 grid system case:
这是我的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.
这是我的一组div，用作表结构。
CSS says following:
CSS 说如下：
.kundregister_grid_1 {
display: inline-block;
float: left;
margin: 0;
text-align: center;
}
.kundregister_grid_1 {
width: 140px;
}
Don't mind the Swedish naming. I want the divs to show even though they have no values.
不要介意瑞典语的命名。我希望 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.
像这样，在这种情况下，两列中没有“Namn”和“Avn.Namn”。但是，当在 chrome 中运行它时，它们会被删除，并且不再按顺序推送其他 div float:left。因此，如果我在上面的相同 div 中有类别，那么这些值将被放置在错误的类别下。
采纳答案by Rito
it works if you remove floating. http://jsbin.com/izoca/2/edit
如果您删除浮动，它会起作用。http://jsbin.com/izoca/2/edit
with floats it only works if theres some content e.g.
使用浮动它只有在有一些内容时才有效，例如
回答by Pekka
Try adding to the empty items.
尝试添加 到空项目。
I don't understand why you're not using a <table>here, though? They will do this kind of stuff automatically.
我不明白你为什么不在<table>这里使用 a ？他们会自动做这种事情。
回答by Jonathan
Slight update to @no1cobla answer. This hides the period. This solution works in IE8+.
对@no1cobla 的回答略有更新。这隐藏了期间。此解决方案适用于 IE8+。
.class:after
{
content: '.';
visibility: hidden;
}
回答by Engineeroholic
A simple solution for empty floateddivs is to add:
空浮动div 的一个简单解决方案是添加：
- width (or min-width)
- min-height
- 宽度（或最小宽度）
- 最小高度
this way you can keep the float functionality and force it to fill space when empty.
通过这种方式，您可以保留浮动功能并强制它在空时填充空间。
I use this technique in page layout columns, to keep every column in its position even if the other columns are empty.
我在页面布局列中使用这种技术，即使其他列是空的，也可以将每一列保持在其位置。
Example:
例子：
.left-column
{
width: 200px;
min-height: 1px;
float: left;
}
.right-column
{
width: 500px;
min-height: 1px;
float: left;
}
回答by Blowsie
Simply add a zero width space character inside a pseudo element
只需在伪元素中添加一个零宽度空格字符
.class:after {
content: '0b';
}
回答by vothaison
This is one way:
这是一种方式：
.your-selector:empty::after {
content: ".";
visibility: hidden;
}
回答by simhumileco
You can:
你可以：
Set to .kundregister_grid_1:
设置为.kundregister_grid_1：
width(orwidth-min) withheight(ormin-height)- or
padding-top - or
padding-bottom - or
border-top - or
border-bottom
width(或width-min) 与height(或min-height)- 或者
padding-top - 或者
padding-bottom - 或者
border-top - 或者
border-bottom
Or use pseudo-elements: ::beforeor ::afterwith:
或使用伪元素：::before或::after与：
{content: "\200B";}- or
{content: "."; visibility: hidden;}.
{content: "\200B";}- 或
{content: "."; visibility: hidden;}。
Or put inside empty element, but this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;
或者放入 空元素，但这有时会带来意想不到的效果，例如。结合text-decoration: underline;
回答by MrTombola
Why not just add "min-width" to your css-class?
为什么不将“最小宽度”添加到您的 css-class 中？
回答by S M Mahmodul Hassan
works but that is not right way I think the w min-height: 1px;
有效，但我认为 w min-height: 1px; 这不是正确的方式。
回答by mmmeff
If they need to be floated, you could always just set the min-height to 1px so they don't collapse.
如果它们需要浮动，您总是可以将 min-height 设置为 1px，这样它们就不会折叠。
