CSS 如何强制内联块元素换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14487610/
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 force inline-block elements to wrap?
提问by user1031947
I have an inline-block div.
我有一个内联块 div。
.element {
display: inline-block;
}
I use jquery to repeatedly append it to the DOM.
我使用 jquery 反复将其附加到 DOM。
var element = $("<div class='element'>");
$(body).append(element).append(element).append(element).append(element);
However the appended divs do not wrap. It is as if I had the following mark-up (no newlines)
但是，附加的 div 不会换行。就好像我有以下标记（没有换行符）
<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>
Appending whitespace inbetween the elements does not fix problem:
在元素之间添加空格并不能解决问题：
$(body).append(element).append(" ");
How can I force these elements to wrap? (I do not want to use floats).
如何强制这些元素换行？（我不想使用浮动）。
回答by kyle.stearns
If they are simply divelements set to inline-blockthey should wrap like so: http://jsfiddle.net/72cYy/
如果它们只是div设置为的元素，inline-block它们应该像这样包装：http: //jsfiddle.net/72cYy/
Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.
检查并确保它们的容器/父元素没有white-space:nowrap. 这将导致他们不换行。
回答by A_AR
You can give the elements width in terms of percentage. Change the percentage value with regard to the number of elements and how you want to wrap it.
您可以按百分比指定元素宽度。根据元素数量和您想要的包装方式更改百分比值。
回答by Dennis Martinez
I would recommend styling the element class with css to create the whitespace. If you don't want to do this you can always try to append a non-breaking space.
我建议使用 css 样式化元素类以创建空格。如果您不想这样做，您可以随时尝试附加一个不间断的空格。
var element = $("<div class='element' /> ");
回答by George
Alternatively, if the ::before pseudo element isn't being used, you can utilize it's powers to solve this issue.
或者，如果未使用 ::before 伪元素，您可以利用它的功能来解决此问题。
element:before { /* single : to support older browsers */
display:block;
width:100%;
}
this is a solution for inlineelements
这是内联元素的解决方案
