Question

我正在尝试将文字放在此网页上http://www.freethemind.biz/

它所说的在物理层面上，冥想：以及列为好处的一切

和

在心理层面，冥想：以及列为好处的一切

并排，几乎像一张桌子

我试过了

CSS中的

float:left and float:right

以下代码：

h12{float:left;}
h13{float:right;}

但它不起作用！我对网页创建非常陌生，所以任何方向都值得赞赏！我还尝试将文字包装在标签<h12>和<h13>中并排放置，如果它更容易（对我来说没有= [）

Answer 1

首先，h12和h13是不存在的HTML代码，因此无效。

以下情况有效：

<div>
<div style="float:left;width:50%">
<strong>On a physical level, meditation:</strong><p></p>
<p>·       Lowers high blood pressure</p>
<p>·       Lowers the levels of blood lactate, reducing anxiety attacks</p>
<p>·       Decreases tension-related ailments such as headaches, insomnia, and muscle &amp; joint pain</p>
<p>·       Increases serotonin production that improves mood and behavior</p>
</div>
<div style="float:right;width:50%"><strong>On a mental level, meditation:</strong><p></p>
<p>·       Helps decrease anxiety</p>
<p>·       Leads to a calmer mind which in turn results in more concentration and clarity</p>
<p>·       Improves emotional stability</p>
<p>·       Increases creativity and Develops Intuition</p>
</div>
</div>

使用<ul></ul>或<ol></ol>制作列表而非使用<p></p>也是一种更好的做法。

Answer 2

如果不修改HTML，您可以使用以下CSS实现此目的：

h12, h13 {
  float: left;
  width: 50%;
}

请注意heading tags only go up to h6！ h12和h13不是标准代码，而是unsupported in many browsers。因此，您应该考虑使用<div>标记，并应用唯一的class将此行为分离为仅少数特定元素。

＆＃13;

.floating {
  float: left;
  width: 50%;
}

＆＃13;

<div class="floating">
  <strong>On a physical level...</strong>
  <p>Paragraph</p>
</div>
<div class="floating">
  <strong>On a mental level...</strong>
  <p>Paragraph</p>
</div>

＆＃13;

希望这有帮助！：）

Answer 3

你所要做的就是将你的2个DIV包裹在另一个DIV中。

你应该考虑清理你的标记。看一下＆＃34; HTML Document Outline＆＃34;。

在网页HTML / CSS上并排显示文字

3 个答案: