把两段放在一起

我一直在尝试使用段落，并从script标记中写入它们，我想知道是否有办法将它们水平放置在一起，而不是放在下面。我当前的代码是这样的：

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

我不知道如何将"csvData"one_answers"csvData2"放在一起。

这不是脚本的事情，这很容易通过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>

使用CSS更改其默认行为：

p {
display: inline;
}

或

p {
display: inline-block;
}

值得一提的是，在设计布局时，要考虑您是否为要解决的问题使用了正确的元素。也许在你的具体情况下还有另一种方法？

阅读此处：CSS显示：内联与内联块

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

p {
display: inline-block;
}

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

根据"next to"的意思，有几种可能的答案。

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

如果段落长度不是问题，那么第一个问题可能是"为什么需要标记？"了解块标记和内联标记之间的区别是HTML的基础。我提到这一点是因为你表示你是HTML的新手。您只需使用或其他标签即可找到所需内容。有关块和内联元素的解释，请参阅Mozilla开发者网络文档。

在我看来，从长远来看，使用不同的元素，如，比从块类型修改标签更可取。

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

或者，如果必须的话，你可以使用CSS

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

@Moose在解释块、内联和内联块之间的区别的问题的不同答案中提供了一个很好的链接。值得一读。

如果你想要两列布局的段落，这个问题在StackOverflow上有很多解决方案。例如，这里，这里和这里。

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

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

实际上，既然您似乎想要显示表数据，为什么不将其作为表呢？

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>

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

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

请尝试以下操作：

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

希望这能有所帮助。。欢呼

相关内容

最新更新

热门标签：