如何使标题跨越html中的两列？

Question

我正在尝试构建像这样的3列页面：

是否可以使标题仅跨越两列？ 使用排除项没有结果=（我被卡住了！

我需要使用浮动文本执行3列：

 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
 -webkit-column-rule: 2px solid #B8B8B8;

所以使用表格不是解决方案

Answer 1

CSS3专门为此目的提供了column-count，但不幸的是旧浏览器不支持它。

.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

DEMO

Answer 2

您可以使用样式为float:left的DIV将2列彼此相邻放置。有头衔的DIV可以超越他们。

演示：http://jsfiddle.net/6cttL/

Answer 3

我需要解决这个问题，并在kmsm.ca找到了这个：

生成列

如果我们想要一个元素（比如标题）跨越多个列，我们可以使用新的列范围属性。

column-span有两个可能的值：all和常规数字（例如1,2,3）。将列跨度定义为所有意味着给定元素将跨越整个多列块，而为其分配常规数字将将其跨度限制为该列数：

h2 {
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
}

希望有所帮助 更新 - 这适用于Chrome但不适用于Firefox

Answer 4

使用带有colspan的表怎么样？

<table>
    <tr>
        <td colspan="2" id="title">

        </td>
    </tr>
    <tr>
        <td id="firstcolumn">

        </td>
        <td id="secondcolumn">

        </td>
    </tr>
</table>

Answer 5

我不确定你的文档结构在该图像下面是什么，但一种常见的技术是在内容块周围放置一个“包装”div来简化它们的布局。

所以，你将最右边的内容放在div中，然后将div中的所有内容放在div中。在左边的div中，你有你的标题，然后在它下面，一个包含两列的div。

<div id="rightMain">...</div> <!--Float right-->
<div id="leftMain">
    <h2>Article Title</h2>
    <div id="article">
        <div id="leftArticleCol">...</div>
        <div id="rightArticleCol">...</div>
    </div>
</div>