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-break in 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?
Another example is when using display: inline-block or 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?
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' if it'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 position of fixed or absolute nothing will, so far as I know, force a 'new line,' as those elements are removed from the document's normal flow.
Have the element display as a block:
display: block;
It depends why the something is on the same line in the first place.
clear in the case of floats, display: block in the case of inline content naturally flowing, nothing will defeat position: absolute as the previous element will be taken out of the normal flow by it.
来源：https://stackoverflow.com/questions/5528275/whats-the-css-to-make-something-go-to-the-next-line-in-the-page