Question

我正在使用webview作为容器为windows metro app创建文本阅读器应用程序（像bing news一样）。但我面临的问题是如何用水平滚动划分多列中的text / html内容？我尝试使用带有列数标记的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
    }

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

1 个答案: