Question

我想要一个元素来填充父div的剩余空间。我已设法做到这一点，你可以在这里看到“链接删除”但填充div（右）位于左div下方。我基本上希望正确的div从左边的div开始。

希望这是有道理的。

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #left {
        float:left;
        width:180px;
        background-color:#ff0000;
        height:20px;
    }
    #right {
        width: 100%;
        background-color:#00FF00;
        height:30px;
    }
    </style>
    </head>

    <body>
    <div>
    <div id="left">Nav</div>
    <div id="right">This is the space I need to fill but not go underneath the nav div</div>
    </div>
    </body>
    </html>

Answer 1

在#right上，只需移除width: 100%，然后添加overflow: hidden。

请参阅： http://jsfiddle.net/hJzJf/ - （我假设您的height仅用于测试目的）

为什么这样做？

请参阅：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

Answer 2

在#right元素上设置margin-left: 180px;。这将使它偏移第一个元素的宽度。

http://jsfiddle.net/DHSej/

填充div的空间

2 个答案: