你能只用CSS对div进行重新排序，并让它们像段落一样内联吗？（无显示柔性或网格）[复制]

Can you reorder divs with only CSS and keep them inline like a paragraph? (no display flex or grid) [duplicate]

提问人：GolDonMomotaro69 提问时间：11/17/2023 最后编辑：TylerHGolDonMomotaro69 更新时间：11/21/2023 访问量：86

问：

这个问题在这里已经有答案了：
是否可以在不更改 HTML 的情况下更改内联元素的顺序？ （3 个答案）
2天前关闭。

我有三个 divs 元素，都包含文本并嵌套在另一个 div 中，我都希望它像段落一样内联，而且我无法更改 HTML 或使用 JS。第二个 div 的文本可以超过一行，我希望在 div 顺序中排在最后，让第三个 div 排在第 1 位。div 可以具有任何字体大小和任何内容（但第 1 个和第 3 个始终只有 1 个字符，但可以是任何字符），我想在不应用具有特定度量的属性的情况下实现这一点，例如或其他。20px

我尝试过使用 and，但元素不能像段落一样内联。 两者都不起作用。orderdisplay: flexgridorderinline-flex

示例 HTML：

body > div {
    width: 100px;
    font-size: 15px;
    color: #FFF;
}

div div {
    display: inline;
  padding: 0 5px
}

div div:first-child {
    background: blue;
}

div:nth-child(2) {
    background: green;
}

div:nth-child(3) {
    background: red;
}
<div>
<div>t</div>
<div>text text text text text text text text text text text text</div>
<div>t</div>
</div>

CSS的

评论

0赞 CBroe 11/20/2023
如果你不能使用 flex 或 grid，那么你就没有太多其他事情可以做。我想，将任何东西绝对定位为“重新排列”流程，对于动态文本来说也是不可能的。order
0赞 Robert Siemer 11/20/2023
@CBroe问题不在于 OP 不能使用 flex 或 grid（他实际上可以）。问题在于 flex 和 grid 没有“文本段落”概念，因此不会换行。
0赞 CBroe 11/20/2023
@RobertSiemer这有点吹毛求疵，不是吗？如果它没有给出预期的结果，那么对我来说也属于“无法使用”。
0赞 Robert Siemer 11/20/2023
@CBroe我只是想强调，解决方案不会受到这种限制。也许有弹性/网格的可能性......如果不是现在，也许在未来......
0赞 TylerH 11/21/2023
请不要进行使 OP 要求无效或更改其情况的编辑。在这种情况下，OP 说他们有三个 div，并且 HTML“无法更改”。因此，其他用户更改其 HTML 的任何编辑都是无效/不允许的。

答：

1赞 Robert Siemer 11/21/2023 #1

更改源代码顺序的概念在 CSS 中有些新颖。Flex 和网格布局采纳了这个想法，但旧的标准流程布局没有这个功能。

由于动态换行符是流程布局的一个功能，我猜你不走运。

上一个：根据 &lt;input type=“number” 的 NaN 值进行验证&gt;

下一个：如何像 bootstrap 一样形成 css