三列 div 具有固定宽度的中心 div 和左右平均共享其余空间

Posted 2023-02-24

【中文标题】三列 div 具有固定宽度的中心 div 和左右平均共享其余空间

【英文标题】：Three column div with fixed width for the center div and left and right sharing the rest of the space equally

【发布时间】：2013-01-18 16:14:30

【问题描述】：

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

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

其他人here 提出了这个问题，提出的解决方案对他有效，因为他只需要在左右设置背景。就我而言，我确实必须在左右 div 上放置一些内容。

我还看到了左侧固定而右侧占用其余空间的解决方案。我什至在左右两边找到了一些解决方案，它们具有固定的宽度和剩余的中心。

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

【问题讨论】：

你能用你的代码做一个 Fiddle 吗？

jsfiddle.net/DugGC/1

【参考方案1】：

我在this place 找到了解决方案 一个叫 Paul 的人在几年前就在博客上写过这件事 here

这里是jsfiddle

<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;

【参考方案2】：

给你的 div 一个 inline-block css。

divdisplay:inline-block;
#IAmAFixedWidth 
    width:100px;
    background:green;

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

编辑： 试试这个：

    divdisplay:table-cell; background: orange; 
    #contentwidth:550px; background: black; display: table
    #IAmAFixedWidth 
        width:100px;
        background:green;
    

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

【讨论】：

对不起，我的另一个要求是左右将占据所有可用的剩余空间。我可能没有那么清楚，对此我深表歉意。通过这种实现，左右将只占用他们需要的空间。我将状态设置为未答复，因为我确实需要一些帮助才能做到这一点。

现在我添加了一个带有 display:table 的容器 div，每个子 div 都是 display:table-cell，在这个新的 fiddle 中它可以工作。 jsfiddle.net/DugGC/6

我为您提供了另一种方式的一些要点，但通常不建议使用表格布局。但我能够在谷歌上找到一些东西。看看pmob.co.uk/temp/3col-centrefixed2.htm