如何在新行中添加 div

在 HTML 中，我们可以使用 div 元素来创建一个容器，但有时需要在新行中添加一个 div。

方法一：添加空行

最简单的方法是在 div 的上方或下方添加一个空行，这样就可以将 div 放在新行中。

<p>这是一段文本</p>

<div>
  <p>这是一个 div 容器</p>
</div>

<p>这是另一段文本</p>

在上面的示例中，div 元素将在新行中显示，因为它的前面和后面都有空行。

方法二：使用 CSS

另一个方法是使用 CSS 的 display 属性来控制 div 元素的显示方式。

我们可以将 div 设置为块级元素，这样它就会自动换行。例如：

<p>这是一段文本</p>

<div class="new-line">
  <p>这是一个 div 容器</p>
</div>

<p>这是另一段文本</p>

<style>
  .new-line {
    display: block;
  }
</style>

在上面的示例中，我们用了 CSS 的 display 属性来将 div 设置为块级元素，然后在 div 的前面添加了一行空格。这样，div 就会在新行中显示。

方法三：使用 CSS Flexbox 布局

还有一种方法是使用 CSS 的 Flexbox 布局来创建一个新行。

<div class="flex-container">
  <div>容器 1</div>
  <div>容器 2</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-container > div {
    flex: 1 1 100%;
  }
</style>

在上面的示例中，我们使用了 Flexbox 布局来将 div 元素放在新行中。我们设置 .flex-container 元素的 flex-wrap 属性为 wrap，这样，如果 div 元素的总宽度超过了 .flex-container 元素的宽度，它就会被自动放置到下一行。