Question

我有两个div（div中的孩子）说div1和div2。 div1具有固定宽度，但div2占用所有剩余空间（宽度）。

如果div（父div）的宽度为100％，即不是固定宽度，那么我应该如何设置div2以便它占用div的所有剩余空间并且它们并排显示？

修改::

    body{ padding: 0; margin: 0; font:0.9em arial,verdana,tahoma,helvetica,sans-serif;}

    #wrap{ widht: 100%;}

    #header{ width: 100%; background: black; height: 100px; margin-bottom: 20px;}

    #navigation{ width: 170px; height: 500px; float: left; margin-left: 20px;padding: 0 20px; border-right: solid 1px #CCCCCC;}

    #bodywrap{width: 100%; float: left;}

    #body{ min-height: 500px; margin-left: 20px; }

    #footer{ width: 100%; height: 60px; background: black; float: left; margin-top: 20px; }

由html代码

<div id="wrap">
    <div id="header">
    </div>
    <!-- end of header -->

    <div id="bodywrap">
        <div id="navigation">
        </div>
        <div id="body">             
        </div>
    </div>
    <!-- end for body -->

    <div id="footer">
    </div>
    <!-- end of footer -->      
</div>

我希望身体通过导航留下所有剩余的空间。

Answer 1

试试这个

HTML

<div class="prnt">
    <div class="fl div1">
        --div1 --
    </div>
    <div class="fl div2">
       -- div2 --
    </div>
</div>

CSS

.prnt{
    padding-left:100px;
}

.fl{
    float:left;
    height:100px
}

.div1{
    width:100px;
    margin-left:-100px;
    background:#f00
}

.div2{
    width:100%;
    background:#0f0
}

Answer 2

我会说，如果我理解正确的话，应该是这样的：

<html>
<head>
    <title>test div</title>
    <style type="text/css">
    #wrapper {
        width: 100%;
    }
    #left {
        width: 200px;
        float: left;
        background-color: #dddddd;
    }
    #right {
        background-color: #cccccc;
        margin: 0 0 0 200px;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left">fixed left</div>
        <div id="right">stretched right</div>
    </div>
</body>
</html>

增加保证金以协助克里斯在第一稿中的问题......

Answer 3

我的解决方案如下：

<强> CSS

#container {width:100%; height:200px;}
#first {width:100px; height:100%; background:black; float:left;}
#second {height:100%;width:auto; background:blue; margin-left:100px;}

<强> HTML

<div id="container">
    <div id="first"></div><div id="second"></div>
  </div>

实例：http://jsbin.com/erure4

first div的固定宽度为100px，并向左浮动。这使second div靠近它。 second div通常会使所有宽度覆盖first div，因此需要提供margin-left:100px;（first div的宽度）。

Answer 4

我猜这里：尝试将padding-left: 230px添加到#body。

如何设置div以使其占据其兄弟姐妹留下的父母的所有剩余空间？

4 个答案: