html - 仅使用 css 滚动可调整大小的列

Question

我正在尝试创建一个灵活的布局，其中包含不应包装的预格式化文本的列。我的问题是，仅当我将可滚动容器的宽度设置为具体宽度值时，列中的滚动条才会出现，% 似乎不起作用。如果我这样做，它周围的列仍将使用浏览器窗口正确调整大小，但容器的宽度不会相应改变，因为它是固定的。

这个优秀的教程在创建列方面帮助了我很多：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks但它建立在可调整大小的内容之上。

有什么办法可以用纯 CSS 调整滚动容器和列的大小？

Answer 1

I have already been using overflow:auto but my floats always took as much space as their content was. This caused the columns extend beyond the screen size.

I found the answer in this SO question: force a div to contain floated child divs

I basically had to make my container contain the floated elements and prevent it from collapsing. http://jsfiddle.net/zfsjb/1/

<style>
    #main {
    clear: both; /* Contain floating elements */
    background-color: red;
    }

    #main:after { /* Prevents the collapsing of the containing element. */
    content: ".";
    clear: both; /*  */
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    #primary {
    float: left;
    margin: 0;
    width: 20%;
    background-color: yellow;
    }
    #secondary {
    float: left;
    width: 80%;
    background-color: blue;
    }
</style>
<div id="main">
    <div id="primary">Primary</div>
    <div id="secondary">Secondary</div>
</div>

Answer 2

设置overflow: scroll为左容器，然后在内部p或其他元素中设置宽度

#container1{
    overflow: scroll;
}
#container1 #coll p{
    width: 700px;
}

Answer 3

我认为您可能可以将溢出设置为滚动，这将解决问题