Создание горизонтальной прокрутки газетного стиля многоколоночного html

Question

Я создаю приложение для чтения текста для приложения Windows Metro (что-то вроде новостей Bing) с веб-представлением в качестве контейнера. Но проблема, с которой я сталкиваюсь, состоит в том, как разделить текстовое / HTML-содержимое на несколько столбцов с горизонтальной прокруткой? Я пытался использовать html-css с тегом count-count. Но если текстовое содержимое переполнено, то это создаст вертикальную прокрутку 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
    }