Question

我正在使用CSS将main容器拆分为多个列。这很有效，但h1元素应该有一个colspan。它没有。这是我的代码：

HTML：

<main class="four col">
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>
</main>

CSS：

main
{
    overflow: hidden;
    width: 100%;
    float: left;
}
.col h1
{
    -moz-column-span:       all;
    -webkit-column-span:    all;
    column-span:            all;
}
.four
{
    width: 66.67%;
}
.col
{
    -moz-column-count:          2;
    -moz-column-gap:        1.5em;
    -webkit-column-count:       2;
    -webkit-column-gap:     1.5em;
    column-count:               2;
    column-gap:             1.5em;
}

有任何想法要做到这一点吗？

Answer 1

更新2：

最后的工作示例：

<main class="four">
  <div class="col">
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>
  </div>
</main>

在问题的同一个CSS中。

<强>更新

css overflow: hidden; float: left;样式的

main覆盖了column-span属性。删除它们，它的工作原理。

你的代码工作得很好，只是你的CSS有点傻，h1应该嵌套在被分类的元素中。这是一个有效的例子：

<强> HTML

<div class="newspaper">
    <h1>Heading, my glorious long heading.</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

<强> CSS

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

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

这是jsFiddle

Answer 2

colspan用于<table>列，如果您想要一个简单的样式和页面格式，请查看Bootstrap并特别this section，相信我，您将不会使用任何主要的CSS学习bootstrap的类名后的样式

CSS多列：列跨度不起作用

2 个答案: