Question

标题后我没有得到任何特定的段落。

以下是我的HTML文件脚本：

<!doctype html>
<html>
<head><title>SAM.com</title>
</head>
<body><h1>This is Heading</h1>
      <p>This is paragraph 1</p>

      <p>This is paragraph 2</p>

      <p>This is paragraph 3</p>
</body>
</html>

注意：我想在第一级标题之后显示第3段。

Answer 1

如果您正在寻找CSS解决方案，则可以使用具有order属性集的flexbox布局：

body {
  display: flex;
  flex-direction: column;
}

p {
  order: 1;
}

p:nth-child(4) {
  order: 0;
}

<h1>This is Heading</h1>

<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>

如果您正在寻找JavaScript解决方案，那么一些基本的DOM操作方法（例如insertBefore()）也可以解决问题：

document.body.insertBefore(
  document.getElementsByTagName('p')[2],
  document.getElementsByTagName('h1')[0].nextSibling
);

<h1>This is Heading</h1>

<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>

Answer 2

您可以使用“ table”或“ div”标签代替“ p”标签来满足您的要求。

Answer 3

如果要在脚本中的任何位置定位，可以对要定位的段落使用position:absolute，或者也可以使用Robby的方法。

>

有些链接可以帮助您

https://www.w3schools.com/Css/css_positioning.asp

https://www.w3schools.com/csS/css3_flexbox.asp

从任何地方获取标题下方的段落

3 个答案: