Html 对齐两列文本

我希望我的第二个专栏的文本从第一个专栏的第一段（Lorem Ipsum文本）的相同级别开始。可能吗？目前，它与我的H2文本处于同一级别，看起来不太好。谢谢

---

Firefox尚不支持该功能，但Chrome、Safari、Opera 11.1+和IE10应支持以下功能：

.article h1, .article h2 {
    -webkit-column-span: all;
    column-span: all;
}

有关详细信息：

以下是进一步的信息：

---

在获得更广泛的浏览器支持之前，只需将标题移到

.twoocolumns

div之外。

将H2标记移到该div之外如何？

按摩CSS一点，以获得您想要的方式

<h2 class="article">Biography</h2>
<div class="article twocolumns">

传记

在这种情况下，您需要将

.twoocolumns

类用于没有标题的div，即h2元素，如下所示

<div class="article">
    <h2>Biography</h2>
    <div class="twocolumns">
  <p>Lorem ipsum dolor sit amet,....

所以基本上，将

.twoocolumns

类应用于那些您想要分成两列的元素。在你的情况下，你不想有标题。所以把它排除在外，放在外面

---

有可能，看看这把改变了的小提琴：

通过将h2移出并将段落包装在两列中，稍微调整HTML

<div class="article">
  <h2>Biography</h2>
  <div class="twocolumns">
    <p> ... <p>
    ...
  </div>
</div>

---

我希望这能解决你的问题。至少在您的示例中是有效的。

Hmmm，这对我在Chrome中不起作用。你能创建一个JSFIDLE来显示它的工作原理吗？它在IE10中工作得非常好。不知道为什么它在Chrome中不起作用。这是我的提琴：@j08691，似乎是导致Chrome出现问题的浮动。为什么要投否决票？这回答了OP提出的问题，这多少表明他希望在不改变标记的情况下，尽可能使用列布局的css3解决方案。我已经承认了答案的局限性（缺少浏览器支持），同时提供了支持我答案的文档链接。

<div class="article">
    <h2>Biography</h2>
    <div class="twocolumns">
  <p>Lorem ipsum dolor sit amet,....

p
{
    margin:0;
    padding:0;
}

<div class="article">
  <h2>Biography</h2>
  <div class="twocolumns">
    <p> ... <p>
    ...
  </div>
</div>

.article p {
    margin-top: 3px;   
}