在另一个元素之前插入元素使用CSS

Question

我有以下使用ASP.NET MVC Razor引擎动态生成的代码：

<p class="line-item">COLOR</p>
<p class="line-item">HEIGHT</p>
<p class="line-item">WIDTH</p>

现在，我想以某种方式移动WIDTH

 在高度之前。所以这就是我想要的：

<p class="line-item">COLOR</p>
<p class="line-item">WIDTH</p>
<p class="line-item">HEIGHT</p>

我想使用CSS或最小代码。如果这不起作用，那么我将不得不用C＃代码更改它。

Answer 1

您可以使用CSS3功能Flex方法。使用Flex和order属性，您也可以更改内容的顺序。请参阅支持can i use。

div{display:flex; flex-flow: column;}
p:nth-child(1){order:0;}
p:nth-child(2){order:2;}
p:nth-child(3){order:1;}

 <div>
  <p class="line-item">COLOR</p>
<p class="line-item">HEIGHT</p>
<p class="line-item">WIDTH</p>
  </div>

Answer 2

在页面上生成并且已加载DOM之后，您无法通过CSS更改它，您必须使用JQuery / JavaScript。

如果您想在加载CSS时对其进行排序，那么我强烈建议在后端执行此操作，以获得可靠性和维护原因。

Answer 3

我建议在C＃中更改它。

从技术上讲，如果这些项目始终具有固定的高度，您可以设置position: relative;并通过设置类似top: -18px的内容向上移动一个，然后通过设置类似top: 18px的内容向下移动一个，但这很容易出错。

改变CSS中流动元素顺序的唯一真正方法是让它们使用flex box model并让它们垂直流动。然后，您可以设置order属性以使某些元素显示在其他元素之前。请参阅链接以获取完整说明。这可能只是简单地改变两个元素的顺序，但是，这就是为什么我认为你应该用C＃改变它。

如果C＃真的不是一个选项，那么您当然也可以使用JavaScript更改元素的顺序（我建议查看insertBefore，这样可以移动元素只是一个电话），但与简单地改变C＃中的顺序相比，这似乎很麻烦。