css - 两个完全和固定宽度的 div

Question

我正在尝试在主容器中并排制作两个 div，底部 div 应该适应其余空间的宽度。

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

#container {
    float:left;
    width:100%;
}
#left, #right {
    padding:50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}

#right {
    padding:20px;
    background:#000;
    color:#fff;
} 

我被困在这个阶段http://jsfiddle.net/Z9qW3/7/

Answer 1

#container
{
   overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}

Answer 2

试试这个代码：

演示

css

#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}

html

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

Answer 3

希望这会有所帮助...

#container {
    width: 100%;
}

#left {
    padding: 50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
    float:left;
}

#right {
    padding-top: 20px;
    padding-bottom: 20px;    
    background:#000;
    color:#fff;
    width: 79%;
    float: right;    
} 

Answer 4

我可以从您的问题中得到的是，您想要在左侧有一个固定的 div，而另一个 div 应该在左侧 div 的右侧和底部占据剩余空间。我认为更好的方法是制作一个大 div，然后在左侧浮动一个固定 div，然后您可以使用剩余部分来定位具有 css 定位属性的单个元素