使某些内容转到页面中的下一行的 CSS 是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5528275/
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
Whats the CSS to make something go to the next line in the page?
提问by Justin Meltzer
How can I make an element automatically be positioned on a new line in the page? In HTML I could use <br>, but how do I add something like a line-breakin CSS?
如何使元素自动定位在页面中的新行上？在 HTML 中，我可以使用<br>，但是如何在 CSS 中添加诸如换行符之类的内容？
Say I have the following code for example:
假设我有以下代码，例如：
<p>Lorem ipsum dolor sit amet,
<span id="elementId">consectetur adipisicing elit.</span>
Magni totam velit ex delectus fuga fugit</p>
The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS?
跨度仍然与文本的其余部分位于同一行。如何纯粹通过 CSS 在新行上移动跨度文本？
Another example is when using display: inline-blockor float:
另一个例子是使用display: inline-blockor 时float：
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
.smalldiv {
display: inline-block; // OR
float: left;
}
How can I move one of the <div>s on a new line to create a new row?
如何将<div>s 中的一个移动到新行以创建新行？
回答by David says reinstate Monica
There are two options that I can think of, but without more details, I can't be sure which is the better:
我能想到两个选项，但没有更多细节，我无法确定哪个更好：
#elementId {
display: block;
}
This will force the element to a 'new line' ifit's not on the same line as a floated element.
这将迫使元素一个“新行” ，如果它不是在同一条线上的浮动元素。
#elementId {
clear: both;
}
This will force the element to clear the floats, and move to a 'new line.'
这将强制元素清除浮动，并移动到“新行”。
In the case of the element being on the same line as another that has positionof fixedor absolutenothing will, so far as I know, force a 'new line,' as those elements are removed from the document's normal flow.
在该元件为在同一行的另一个具有的情况下position的fixed还是absolute什么都不会，所以据我所知，迫使“新线”，这些元件是从文档的正常流程中移除。
回答by M?rten Wikstr?m
Have the element display as a block:
将元素显示为块：
display: block;
回答by Quentin
It depends why the something is on the same line in the first place.
这首先取决于为什么某物在同一条线上。
clearin the case of floats, display: blockin the case of inline content naturally flowing, nothing will defeat position: absoluteas the previous element will be taken out of the normal flow by it.
clear在浮动display: block的情况下，在内联内容自然流动的情况下，没有什么会失败，position: absolute因为前一个元素会被它从正常流中取出。
