Question

如何让元素自动定位在页面的新行中？在HTML中，我可以使用<br>，但如何在CSS中添加类似换行符的内容？

假设我有以下代码：

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

跨度仍与文本的其余部分位于同一行。如何仅通过CSS在新行上移动跨区文本？

另一个例子是使用display: inline-block或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;
}

如何在新行上移动其中一个<div>来创建新行？

Answer 1

我可以想到两个选项，但没有更多细节，我无法确定哪个更好：

#elementId {
    display: block;
}

如果它与浮动元素不在同一行，则会强制元素为“新行”。

#elementId { clear: both; }

这将强制元素清除浮动，并移动到“新行”。

如果元素与position fixed或absolute的{{1}}位于同一行，则据我所知，强制执行'新行'， '因为这些元素已从文档的正常流程中删除。

Answer 2

将元素显示为块：

display: block;

Answer 3

这取决于为什么某些东西首先在同一条线上。

在浮点数的情况下

clear，在内联内容自然流动的情况下display: block，没有任何东西可以击败position: absolute，因为前一个元素将被从正常流中取出

是什么让CSS进入页面的下一行？

3 个答案: