css - 使某些内容转到页面中的下一行的 CSS 是什么?

标签 css positioning

<分区>

如何让元素自动定位在页面的新行上?在 HTML 中我可以使用 <br> , 但如何在 CSS 中添加类似 line-break 的内容?

例如,假设我有以下代码:

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

跨度仍然与文本的其余部分位于同一行。如何完全通过 CSS 将跨度文本移动到新行?

另一个例子是使用 display: inline-blockfloat :

<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> 中的一个?是否在新行上创建新行?

最佳答案

我可以想到两个选项,但是没有更多细节,我不能确定哪个更好:

#elementId {
    display: block;
}

这将强制元素换行如果它与 float 元素不在同一行。

#elementId {
     clear: both;
}

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

如果元素与另一个元素位于同一行,且其 positionfixedabsolute 则什么都不会,只要我知道,强制“换行”,因为这些元素已从文档的正常流程中删除。

关于css - 使某些内容转到页面中的下一行的 CSS 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5528275/

相关文章:

html - 文本未对齐

css - 固定定位切断图像,当浏览器太小

html - Z-index 在子导航中不起作用

html - 如何使输入框垂直居中对齐?

css - XHTML namespace 和 CSS 属性选择器

css - slider 顶部的 Div

opencv - 图像中简单基准点的位置识别

CSS Drop Down DIV 菜单...为什么我的链接会损坏它?

css - 正在应用填充,但与 CSS 中的值不同

javascript - Bootstrap - CSS 文件未加载