entityMap|blocks|key|efpv9|text|这不是一个脚本的事情，这将很容易通过CSS完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9utgc|​|9lfm|#csvData+{
++border:+1px+solid+red;
++height:+200px;
++float:+left;
++width:+45%25;
}
#csvData2+{
++border:+1px+dotted+blue;
++height:+400px;
++float:+right;
++width:+45%25;
}|code-block|syntax|javascript|4834i|<p+id="csvData"></p>
<p+id="csvData2"></p>+|fnhku|9m231^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|L|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|M|4|-4|6|7|8|S|9|@]|A|@]|B|$]]]]

<p>It isn't a script thing, this would easily be done via CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="csvData"&gt;&lt;/p&gt;
&lt;p id="csvData2"&gt;&lt;/p&gt; </code></pre>
</div>
</div>
</p>


entityMap|blocks|key|9iipr|text|使用display:+inline;、display:+inline-block;或float:+left;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|33q77|​|9jvc4|p+{
++display:+inline-block;
++}|code-block|syntax|javascript|1908b|<p+id="csvData">1</p>
<p+id="csvData2">2</p>+|4sgs5|fnuq4^0|2|G|J|M|16|C|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@$A|S|B|T|C|D]|$A|U|B|V|C|D]|$A|W|B|X|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|Y|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|Z|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|K|8|10|9|@]|E|@]|F|$L|M]]|$2|P|4|H|6|7|8|11|9|@]|E|@]|F|$]]|$2|Q|4|-4|6|7|8|12|9|@]|E|@]|F|$]]]]

<p>use <code>display: inline;</code>, <code>display: inline-block;</code> or <code>float: left;</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>p {
  display: inline-block;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="csvData"&gt;1&lt;/p&gt;
&lt;p id="csvData2"&gt;2&lt;/p&gt; </code></pre>
</div>
</div>
</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block|blocks|key|9vfkh|text|使用CSS更改其默认“行为”：|unstyled|depth|inlineStyleRanges|entityRanges|3v48p|p+{
++++display:+inline;
}|code-block|syntax|javascript|245vc|或者|eqjd4|p+{
++++display:+inline-block;
}|f0cpd|点击此处阅读：CSS+display:+inline+vs+inline-block|offset|length|5jo89^0|0|0|0|0|7|Z|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|X|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|Y|G|@]|H|@]|6|$]]|$A|P|C|Q|2|K|F|Z|G|@]|H|@]|6|$L|M]]|$A|R|C|S|2|E|F|10|G|@]|H|@$T|11|U|12|A|13]]|6|$]]|$A|V|C|-4|2|E|F|14|G|@]|H|@]|6|$]]]]

<p>Use CSS to change their default "behavior":</p>

<pre><code>p {
    display: inline;
}
</code></pre>

<p>OR</p>

<pre><code>p {
    display: inline-block;
}
</code></pre>

<p>Read here:
<a href="https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block">CSS display: inline vs inline-block</a></p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements|1|https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements|2|https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block|3|https://stackoverflow.com/questions/11798645/css-2-column-layout|4|https://stackoverflow.com/questions/5573855/how-to-make-a-stable-two-column-layout-in-html-css|5|https://stackoverflow.com/questions/30858717/css-float-logic|6|https://stackoverflow.com/questions/10994515/float-left-and-right|blocks|key|7g5v4|text|有几种可能的答案，这取决于你所说的“旁边”是什么意思。|unstyled|depth|inlineStyleRanges|entityRanges|9gsfh|<p+id="csvData"></p>
<p+id="csvData2"></p>|code-block|syntax|javascript|45iul|如果段落长度不是问题，那么第一个问题可能真的是“为什么需要<p>标记？”理解块标记和行内标记之间的区别是HTML的基础。我提到这一点是因为您表明您是HTML新手。您可以通过使用<span>或其他一些标记来简单地找到您需要的内容。有关block和inline元素的解释，请参阅Mozilla+Developer+Network文档。|offset|length|style|CODE|c4gvp|在我看来，从长远来看，使用不同的元素，比如<span>，要比修改块类型的<p>标记更可取。|3tm2n|
<span+id="csvData"></span>
<span+id="csvData2"></span>|dqsc9|或者，如果需要，可以使用CSS|dam0n|#csvData,+#csvData2+{
+++display:+inline;+/*+or,+inline-block+*/
}|c9ir8|@Moose在对a+question+explaining+the+difference+between+block,+inline,+and+inline-block的不同回答中提供了一个很好的链接。值得一读。|5fdt1|如果你想要两栏布局的段落，这个问题在StackOverflow上有很多解决方案。例如，here、here和here。|3u4o3|另一种可能的解决方案是浮动。浮动通过CSS应用，并导致元素以最小宽度向左(或向右，取决于声明)堆叠。浮点数有几个复杂的问题。Float会更改元素的默认宽度，并且可能会导致与对象高度/宽度相关的其他复杂情况。(例如，未设置样式的段落自然具有尽可能大的宽度，但浮动段落的宽度较小。)通常，当您使用浮点数时，您需要手动指定宽度，并且需要在以后“清除”浮点数。这里有很多很好的浮点数资源，包括here和here。|5483i|/*+CSS+*/
#csvData,+#csvData2+{
+++border:+1px+dotted+blue;+/*+To+show+the+paragraphs+*/
+++float:+left;
+++width:+100px;
}|31ljt^0|0|0|T|3|2G|6|38|5|0|3E|6|1|0|L|6|10|3|0|0|0|0|8|24|2|0|17|4|3|1H|4|4|0|5C|4|5|5H|4|6|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]|B|$2|3|4|5|6|$7|C]]|D|$2|3|4|5|6|$7|E]]|F|$2|3|4|5|6|$7|G]]|H|$2|3|4|5|6|$7|I]]|J|$2|3|4|5|6|$7|K]]]|L|@$M|N|O|P|2|Q|R|1M|S|@]|T|@]|6|$]]|$M|U|O|V|2|W|R|1N|S|@]|T|@]|6|$X|Y]]|$M|Z|O|10|2|Q|R|1O|S|@$11|1P|12|1Q|13|14]|$11|1R|12|1S|13|14]]|T|@$11|1T|12|1U|M|1V]|$11|1W|12|1X|M|1Y]]|6|$]]|$M|15|O|16|2|Q|R|1Z|S|@$11|20|12|21|13|14]|$11|22|12|23|13|14]]|T|@]|6|$]]|$M|17|O|18|2|W|R|24|S|@]|T|@]|6|$X|Y]]|$M|19|O|1A|2|Q|R|25|S|@]|T|@]|6|$]]|$M|1B|O|1C|2|W|R|26|S|@]|T|@]|6|$X|Y]]|$M|1D|O|1E|2|Q|R|27|S|@]|T|@$11|28|12|29|M|2A]]|6|$]]|$M|1F|O|1G|2|Q|R|2B|S|@]|T|@$11|2C|12|2D|M|2E]|$11|2F|12|2G|M|2H]]|6|$]]|$M|1H|O|1I|2|Q|R|2I|S|@]|T|@$11|2J|12|2K|M|2L]|$11|2M|12|2N|M|2O]]|6|$]]|$M|1J|O|1K|2|W|R|2P|S|@]|T|@]|6|$X|Y]]|$M|1L|O|-4|2|Q|R|2Q|S|@]|T|@]|6|$]]]]

<p>There are several possible answers, depending on what you mean by "next to".</p>

<pre><code>&lt;p id="csvData"&gt;&lt;/p&gt;
&lt;p id="csvData2"&gt;&lt;/p&gt;
</code></pre>

<p>If paragraph length isn't an issue, the first question might really be "Why do you need <code>&lt;p&gt;</code> tags?" Understanding the difference between block tags and inline tags is foundational in HTML. I mention this because you indicate you are new to HTML. You may find what you need simply by using <code>&lt;span&gt;</code> or some other tag. See the Mozilla Developer Network documentation for explanations of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements" rel="nofollow noreferrer">block</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements" rel="nofollow noreferrer">inline</a> elements.</p>

<p>Using a different element, such as <code>&lt;span&gt;</code> is preferable in the long run to modifying <code>&lt;p&gt;</code> tags from the block type, in my opinion.</p>

<pre><code>&lt;!-- Alternative, with spans instead --&gt;
&lt;span id="csvData"&gt;&lt;/span&gt;
&lt;span id="csvData2"&gt;&lt;/span&gt;
</code></pre>

<p>Or, if you must, you can use CSS</p>

<pre><code>#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}
</code></pre>

<p>@Moose provided a good link in a different answer to <a href="https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block">a question explaining the difference between block, inline, and inline-block</a>. Worth reading.</p>

<p>If you want the paragraphs in a two-column layout, that question has many solutions here on StackOverflow. e.g., <a href="https://stackoverflow.com/questions/11798645/css-2-column-layout">here</a>, here and <a href="https://stackoverflow.com/questions/5573855/how-to-make-a-stable-two-column-layout-in-html-css">here</a>.</p>

<p>Another possible solution is floats. Floats are applied via CSS, and cause elements to stack left (or right, depending on the declaration) with minimum widths. There are several complications with floats. Float changes the default width of elements, and may cause other complications related to object height/width. (For example, an otherwise unstyled paragraph takes as much width as it can naturally, but a floated paragraph has a smaller width.) Usually when you use floats, you'll want to manually specify a width, and will need to "clear" the floats later. There are many good resources on floats here, including <a href="https://stackoverflow.com/questions/30858717/css-float-logic">here</a> and <a href="https://stackoverflow.com/questions/10994515/float-left-and-right">here</a>.</p>

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


entityMap|blocks|key|7omd2|text|实际上，既然您似乎想要显示表数据，为什么不把它变成一个表呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fos4s|​|91qht|table+{
++width:+100%25;+/*+not+necessary+if+100%25,+but+can+be+set+narrower+here+*/
++}|code-block|syntax|javascript|8pfft|<table>
++<tr>
++++<td>
++++++<p+id="csvData">One</p>
++++</td>
++++<td>
++++++<p+id="csvData2">Two</p>
++++</td>
++</tr>
</table>|3jbob|ftsfq^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|L|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|M|4|-4|6|7|8|S|9|@]|A|@]|B|$]]]]

<p>Actually, since you seem to want to display table data, why not make it a table?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;p id="csvData"&gt;One&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;p id="csvData2"&gt;Two&lt;/p&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|21okd|text|P和div元素是块级元素，其中span是内联元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c1ng4|您可以将每个<p>包装在<div>中，也可以使用<span>|offset|length|style|CODE|8o9ta^0|0|6|3|C|5|O|6|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@$E|L|F|M|G|H]|$E|N|F|O|G|H]|$E|P|F|Q|G|H]]|A|@]|B|$]]|$2|I|4|-4|6|7|8|R|9|@]|A|@]|B|$]]]]

<p>p and div elements are block level elements where span is an inline element.</p>

<p>You can either wrap each <code>&lt;p&gt;</code> in a <code>&lt;div&gt;</code> or use <code>&lt;span&gt;</code></p>


entityMap|blocks|key|bu78a|text|请尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|aruqt|<p+id="csvData"+style="display:+inline-block;+width:+50%25;"></p>
<p+id="csvData2"+style="display:+inline-block;+width:+50%25;"></p>+|code-block|syntax|javascript|2eiu0|此外，您还可以添加css条目，例如：|72tbq|p#csvData,+p#csvData2+{
++++display:+inline-block;
++++width:+50%25;
}|d9so6|希望这能帮上忙..干杯|7d7sq^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|P|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Q|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|R|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|S|9|@]|A|@]|B|$]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

<p>Please try the following: </p>

<pre><code>&lt;p id="csvData" style="display: inline-block; width: 50%;"&gt;&lt;/p&gt;
&lt;p id="csvData2" style="display: inline-block; width: 50%;"&gt;&lt;/p&gt; 
</code></pre>

<p>additionally you can add a css entry such as:</p>

<pre><code>p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}
</code></pre>

<p>hope this helps.. cheers</p>


<p>I've been experimenting with paragraphs and writing to them from the script tag and was wondering if there is a way to place them next to each other horizontally rather than underneath. My current code is like this:</p>

<pre><code>&lt;p id="csvData"&gt;&lt;/p&gt;
&lt;p id="csvData2"&gt;&lt;/p&gt; 
</code></pre>

<p>I can't work out how to get "csvData" and "csvData2" to go to next to each other.</p>


Place two paragraphs next to each other?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我一直在尝试使用段落，并从script标签向它们写入内容，我想知道是否有一种方法可以将它们水平放置在一起，而不是放在下面。我现在的代码是这样的： <p id="csvData"></p><p id="csvData2"></p>  我想不出怎么把"csvData“和"csvData2”放在一起。 

问把两个段落放在一起？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问把两个段落放在一起？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问把两个段落放在一起？
EN