javascript - 创建水平滚动报纸样式的多列 html

Question

我正在为 windows Metro 应用程序(类似 bing 新闻的东西)创建文本阅读器应用程序，并将 webview 作为容器。 但是我面临的问题是如何通过水平滚动将文本/html 内容分成多列？ 我尝试使用带有 column-count 标签的 html-css。但是，如果文本内容溢出，它将根据屏幕宽度创建带有列的垂直滚动 html。

有没有办法用 html/css/javascript 做到这一点？

Answer 1

Demo

html

<div class="reading-canvas">
    <h2>This is heading</h2>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Another heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>More heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <h3>Heading</h3>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>
    <p>Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
    </p>    
    <hr/>
</div>

CSS

    body {
        font-family: sans-serif;
        line-height: 1.5;
        background: whitesmoke;
        margin:0;
        padding:0;
    }
    h1, h2, h3, h4, h5, p {
        margin-top: 0;
        margin-bottom: 32px;
        margin-bottom: 2rem;
    }
    .reading-canvas {
        padding: 1.6em;
        -webkit-column-width: 15em;
        -moz-column-width: 15em;
        column-width: 15em;
        -webkit-column-gap: 2rem;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        max-width: none;
        height: 90vh;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .reading-canvas p:last-child {
        margin-bottom:0
    }