将两个段落并排放置？

Question

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

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

我不知道如何让 "csvData" 和 "csvData2" 并排。

Answer 1

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

p {
  display: inline-block;
  }

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

Answer 2

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

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

Answer 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>

Answer 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%;
}

希望这对您有所帮助..干杯

Answer 5

使用CSS更改默认值"behavior":

p {
    display: inline;
}

或

p {
    display: inline-block;
}

阅读此处： CSS display: inline vs inline-block

Answer 6

其实既然你想显示table的数据，为什么不做成table呢？

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>

Answer 7

有几种可能的答案，具体取决于 "next to" 的意思。

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

如果段落长度不是问题，第一个问题可能真的是 "Why do you need  tags?" 了解块标记和内联标记之间的区别是 HTML 的基础。我提到这个是因为你表明你是 HTML 的新手。您只需使用  或其他一些标签即可找到您需要的内容。有关 block and inline 元素的解释，请参阅 Mozilla 开发者网络文档。

在我看来，使用不同的元素，例如  在长运行修改块类型的  标签中更可取。

<!-- 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 的不同答案中提供了很好的 link。值得一读。

如果您想要 two-column 布局中的段落，这个问题在 Whosebug 上有很多解决方案。例如，here, here and here.

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

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

将两个段落并排放置？

Place two paragraphs next to each other?

html

javascript

css

paragraphs