0

希望你们中的一个人知道这个问题的答案。

我有 2 个浮动 DIVS 和一个具有最小宽度的 DIV 容器内容。当我调整窗口大小并且窗口小于 min-width 内容时，内容会溢出父容器。

我希望父容器扩展以适应而不是让内部最小内容溢出并简单地在浏览器底部获取水平滚动条。

有谁知道解决方案？

<html>
    <style>
        .outer {
            width:100%;
            border:2px solid green;
            position:relative;
        }
        .left {
            float:left;
            width:20%;
            max-width:250px;
            background:red;
        }
        .right {
            float:left;
            width:80%;
            background:#eee;
        }
        .inner {
            min-width:620px;
            border:1px solid blue;
        }
        .clear {
            clear:both;
        }
    </style>
    <div class='outer'>
        <div class='left'>This is an inner content page. This is an inner content page.This is an
            inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.This is
            an inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.</div>
        <div
        class='right'>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
    </div>
    <div style='clear:both'></div>
    </div>

希望滚动条在展开时水平显示在浏览器窗口（而不是 DIV）上。

4

2 回答 2

0

您将最顶层父级的宽度设置为 100%。它不会长得比它的父母大，body在这种情况下就是这样。如果你想让.outer元素变大，你可以指定一个固定的宽度，http://jsfiddle.net/ETcf2/。

有了它并min-width删除了浮动元素，它们的行为就如预期的那样。

于 2011-02-23T22:14:59.330 回答
0

尝试

.outer {
    width:100%;
    border:2px solid green;
    position:relative;
    overflow: scroll;
}
于 2011-02-23T22:15:26.323 回答