3

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

在此处输入图像描述

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

我需要用浮动文本做 3 列：

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

所以使用表不是解决方案

4

5 回答 5

1

我需要解决这个确切问题的方法，并在 kmsm.ca 上找到了这个：

跨越列

如果我们想要一个元素，比如标题，跨越多个列，我们可以使用新的 column-span 属性。

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

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

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

于 2013-10-08T06:10:34.810 回答
1

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

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

演示

于 2013-09-27T14:12:03.740 回答
1

您可以使用带样式float:left的 DIV 将 2 列彼此相邻放置。带有标题的 DIV 可以超过它们。

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

于 2013-09-27T14:12:08.703 回答
0

使用带有 colspan 的表怎么样？

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

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

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

        </td>
    </tr>
</table>
于 2013-09-27T14:06:34.683 回答
0

我不确定您的文档结构在该图像下方是什么，但一种常见的技术是在内容块周围放置一个“包装器”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>
于 2013-09-27T14:09:26.797 回答