Question

我有一个使用CSS列显示的文档，如here所示。 jsFiddle的内容：

HTML：

<div class="two-column"> [some sample content] </div>

CSS：

.two-column {
    width: 610px;
    height: 300px;
    -webkit-column-width: 300px;
    -webkit-column-gap: 10px;
}

显然，这只适用于webkit浏览器，删除/替换其他引擎的前缀。

我希望为每个列添加一个标题，但是找不到任何相似的文档（搜索内容包含CSS和表格列的匹配，或者＃34;列＆＃34;如2中所示 - 或3列页面布局。）

我可以使用javascript对每一列绝对定位，但我希望存在更清晰的CSS解决方案。

Answer 1

我认为你可以这样做： https://jsfiddle.net/maxim_mazurok/ydcwzpra/1/

<div class="two-column2">
    <h1>asd1</h1>
    <h1>asd2</h1>
</div>
<div class="two-column">

    The div.two-column element will be broken up into two columns via the column-width CSS rule. Notice how the image that is too large to fit fully on this column is pushed to the next.

    <img src="http://fakeimg.pl/250/" />

    Here is some more text.

</div>

.two-column {
    width: 610px;
    height: 300px;
    -webkit-column-width: 300px;
    -webkit-column-gap: 10px;
}
.two-column2, .two-column2 > h1 {
    width: 610px;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    -webkit-column-width: 300px;
    -webkit-column-gap: 10px;
}

这不是完美的代码，但希望你有这个想法。

CSS列上的标题

1 个答案: