Question

<div id="IWillShareTheRemainingWidthWithTheRightOne">left stuff</div>
<div id="IAmAFixedWidth">center stuff </div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne">right stuff</div>

左右将占用所有剩余的空间

其他人here已经问过这个问题，并且提出的解决方案对他有用，因为他只需要在左右两侧设置背景。在我的情况下，我必须在左右div上添加一些内容。

我也看到了左边固定的解决方案，右边的一个占据了剩下的空间。我甚至发现左右两侧的解决方案有固定的宽度和中心剩余。

但我还没找到我需要的东西。

Answer 1

我在this place找到了解决方案有人打电话给几年前做过这件事的保罗{@ 3}}

以下是here

<div id="IWillShareTheRemainingWidthWithTheRightOne">stuff on left</div>
<div id="IAmAFixedWidth">stuff on center</div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne"> 
    <div id="insideOf3rd">    
        stuff on right
    </div>
</div>


#IAmAFixedWidth {
    width:100px;
    background:green;
    display:inline-block
}

#IWillShareTheRemainingWidthWithTheRightOne {
width:50%;
margin-right:-50px;
background:magenta;
float:left;
}

#IWillShareTheRemainingWidthWithTheLeftOne {
width:50%;
margin-left:-60px;
background:magenta;
float:right;
}

#insideOf3rd {
margin-left:50px;
}

Answer 2

给你的div一个内联块css。

div{display:inline-block;}
#IAmAFixedWidth {
    width:100px;
    background:green;
}

http://jsfiddle.net/DugGC/5/

修改
试试这个：

div{display:table-cell; background: orange; } #content{width:550px; background: black; display: table} #IAmAFixedWidth { width:100px; background:green; }

http://jsfiddle.net/DugGC/6/

三列div具有固定宽度，用于中心div和左右共享其余空间

2 个答案: