Question

我正在努力实现一些简单但却无法想到在css中实现的方法。

我想开发一个应该可以水平滚动的页面，文本应该保持水平溢出。

即，这样的网站：http://css-tricks.com/examples/HorzScrolling/

但水平网格基本上是不同的div。我想要的是第一个div的部分应该自动溢出到它的水平方向。

就像我们在研究论文中所做的那样，创建一个两个水平分部，就像这里：http://www.ieee.org/documents/transactions_journals.pdf

如何在CSS中使用（如果需要，使用Javascript）？

Answer 1

据我了解，以下内容应该达到您要实现的目标：

<style>
    .wrapper {
        position:absolute;
        overflow-x:auto;
        overflow-y:hidden;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-color:green;
    }
    .inner-wrapper {
        width:20000px;
    }
    .column {
        height:200px;
        border:1px solid #000;
        background-color:blue;
        color:#fff;
        padding:20px;
        float:left;
    }
</style>

<div class="wrapper">
    <div class="inner-wrapper">
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
        <div class="column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    </div>
</div>

http://jsfiddle.net/vdu7a3a4/

您可以使用javascript动态设置.inner-wrapper的宽度，以匹配内容的宽度。

Answer 2

您可以使用CSS-Tricks

上显示的CSS3“columns”属性

如何在css中水平包装垂直溢出？

2 个答案: