将两个段落并排放置？答案

【问题标题】：Place two paragraphs next to each other?将两个段落并排放置？
【发布时间】：2023-04-02 06:16:01
【问题描述】：

我一直在试验段落并从脚本标签写入它们，并且想知道是否有办法将它们水平放置而不是在下方放置。我现在的代码是这样的：

<p id="csvData"></p>
<p id="csvData2"></p>

我不知道如何让“csvData”和“csvData2”彼此相邻。

【问题讨论】：

我漂亮确定你可以用 CSS 做到这一点。
它们彼此相邻。如果您不想要段落间距，而只需要换行符，请改用 <br> 标记。或者，默认情况下 <div> 在标签之间没有间距。此外，您可以使用 CSS 修改间距，但这是另一个主题
看到下面的一些答案......“彼此相邻”是指a）它们之间没有垂直空间，还是b）在同一水平线上？

标签： javascript html css paragraphs

【解决方案1】：

使用display: inline;、display: inline-block; 或float: left;

p {
  display: inline-block;
  }

<p id="csvData">1</p>
<p id="csvData2">2</p>

【讨论】：

【解决方案2】：

p 和 div 元素是块级元素，其中 span 是内联元素。

您可以将每个<p> 包装在<div> 中或使用<span>

【讨论】：

【解决方案3】：

这不是脚本，这很容易通过 CSS 完成。

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}

<p id="csvData"></p>
<p id="csvData2"></p>

【讨论】：

【解决方案4】：

请尝试以下方法：

<p id="csvData" style="display: inline-block; width: 50%;"></p>
<p id="csvData2" style="display: inline-block; width: 50%;"></p>

此外，您还可以添加一个 css 条目，例如：

p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}

希望这会有所帮助.. 干杯

【讨论】：

忽略我之前的评论，只是语法错误。给您添麻烦了

【解决方案5】：

使用 CSS 改变他们的默认“行为”：

p {
    display: inline;
}

或

p {
    display: inline-block;
}

在这里阅读： CSS display: inline vs inline-block

【讨论】：

如果它是一个很长的段落.. 像几句话？我部分认为这是一个错误的答案..
这是一个不错的答案，但非常鼓励问题作者阅读包含的链接。将<p> 内联表示对<p> 标签的误解；也许应该使用其他东西！
是的，我猜@alttag 是正确的。为什么不从选择正确的元素开始。

【解决方案6】：

其实，既然你好像想展示表格数据，不如把它做成表格呢？

table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }

<table>
  <tr>
    <td>
      <p id="csvData">One</p>
    </td>
    <td>
      <p id="csvData2">Two</p>
    </td>
  </tr>
</table>

【讨论】：

【解决方案7】：

有几种可能的答案，具体取决于您所说的“旁边”。

<p id="csvData"></p>
<p id="csvData2"></p>

如果段落长度不是问题，第一个问题可能真的是“为什么需要<p> 标签？”了解块标签和内联标签之间的区别是 HTML 的基础。我提到这一点是因为您表示您是 HTML 新手。只需使用<span> 或其他标签，您就可以找到所需的内容。有关 block 和 inline 元素的说明，请参阅 Mozilla 开发者网络文档。

我认为，从长远来看，使用不同的元素（例如 <span>）比从块类型中修改 <p> 标记更可取。

<!-- Alternative, with spans instead -->
<span id="csvData"></span>
<span id="csvData2"></span>

或者，如果必须，您可以使用 CSS

#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}

@Moose 在对a question explaining the difference between block, inline, and inline-block 的不同答案中提供了一个很好的链接。值得一读。

如果您希望段落采用两列布局，该问题在 StackOverflow 上有很多解决方案。例如，here，这里和here。

另一种可能的解决方案是浮动。浮点数通过 CSS 应用，并导致元素以最小宽度向左（或向右，取决于声明）堆叠。浮动有几个并发症。 Float 更改元素的默认宽度，并可能导致与对象高度/宽度相关的其他复杂情况。（例如，一个没有样式的段落自然会占用尽可能多的宽度，但浮动段落的宽度较小。）通常当您使用浮动时，您需要手动指定宽度，并且需要“清除”稍后浮动。这里有很多关于float的好资源，包括here和here。

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}

【讨论】：