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

Question

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

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

Answer 1

演示

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
    }