Question

我有一个简单的HTML元素列表，如div，Paragraphs等。我想在固定高度的容器中显示它们，内容显示在具有相同固定宽度的列中，所有内容都可以水平滚动，就像它的{{ 3}}。
它应该使用的浏览器是IE11。任何想法，如何实现它？感谢。

Answer 1

全部放入： <div class="sample"></div>并将其换成<div class="container"></div>

为所有.sample类和.container提供固定的宽度和高度。

.sample {
    width: 900px;
    height: 500px;
}
.container {
    overflow-x: scroll;
    overflow-y: hidden;
}

Answer 2

您可以使用css3列 http://www.w3schools.com/cssref/css3_pr_columns.asp

<div id="main">
    Content here, no wrapping divs needed...
</div>

甚至更好地使用html5

<main>
     Content here, no wrapping divs needed...
</main>

Answer 3

您必须将所有元素放在容器中，并给它一个足够大的宽度，以便不包裹元素。元素应该是float: left或display: inline-block。

然后放置一个div窗格，显示容器的剪切块并提供该窗格overflow-x: auto以便在必要时显示滚动条

<div class="pane">
    <div class="container">
        <p class="column">Lorem ipsum dolor sit amet, ...</p>
        <div class="column">Lorem ipsum dolor sit amet, ...</div>
        <div class="column">Lorem ipsum dolor sit amet, ...</div>
        <p class="column">Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>

.pane {
    width: 100%;
    height: 380px;
    overflow-x: auto;
}
.container {
    width: 1250px;
    max-height: 350px;
}
.container .column {
    display: inline-block;
    width: 300px;
}

请参阅JSFiddle

如何在列中显示HTML内容，可以水平滚动？

3 个答案: