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

试用此代码：

<强> Demo

<强> 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定位属性的单个元素

两个div满和固定宽度

4 个答案: