如何在 CSS 中使 3 列宽度具有不同大小的流体答案

【问题标题】：How to make 3 column width fluid with different sizes in CSS如何在 CSS 中使 3 列宽度具有不同大小的流体
【发布时间】：2014-04-15 10:06:14
【问题描述】：

我有一个盒子，里面有 3 个 div。我在下面做了一张图片，我设置了两个外部 div 的宽度，我需要它们，但中间的 div 我想要流动并填充到剩余的宽度。

此代码将用于具有不同宽度的不同页面，因此我希望中间始终根据填充剩余宽度进行调整。

【问题讨论】：

CSS 3 Column float (2 fixed, 1 dynamic)的可能重复
这适用于 3 号 div 是动态的而不是中间 div 所以这无济于事，但谢谢。
这个问题可能重复[stackoverflow.com/questions/7292021/…请检查答案

标签： html css

【解决方案1】：

不换行的方法是使用display: table-cell。为确保间距正常工作，您应该将 div 包装在容器中并在容器上设置 max-width。然后找到中间框的剩余宽度：65+185 = 250. 800（我的最大宽度示例）- 250 = 550. 550/800 = 68.75%。将该百分比设置为中间框，它将完全流动。无论浏览器变得多小，框 3 都不会跳到下一行。

FIDDLE

CSS

.container{
  max-width: 800px
}

.box1{
  width: 65px;
  height: 50px;
  background: black;
  display: table-cell;
  vertical-align: top;

}

.box2{
  width: 68.75%;
  height: 50px;
  background: green;
  display: table-cell;
  vertical-align: top;
}

.box3{
  width: 185px;
  height: 50px;
  background: yellow;
  display: table-cell;
  vertical-align: top;
}

HTML

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

【讨论】：

谢谢，但是最大宽度会根据我发送到哪个页面而改变，这是我想要弄清楚的，当整体的最大宽度达到容器要变了吗？
查看 css calc() 但这还没有完全支持，所以我倾向于远离它。你最好的选择是使用 javascript/jquery

【解决方案2】：

可能的解决方案：

这是css

main { width:100% }
left { 
     display:inline-block; 
     width: 65px; 
     height: 291px; 
     background-color:#0000ff; 
}
middle {  
     position:absolute;
     display:inline-block; 
     background-color:#ffff00; 
     height: 291px; 
     margin-right:185px
}
right { 
     float:right; 
     height: 291px; 
     background-color: #ff0000; 
     width: 185px;
}

还有html：

<div class="main">
    <div class="left"></div>

    <div class="middle">
        blablabla
    </div>

    <div class="right"></div>
</div>

您可以在此处找到工作示例：http://jsfiddle.net/mLJLr/1/

【讨论】：

【解决方案3】：

使用这个css：

    #left {
        float:left;
        width:65px;
        background-color:#ff0000;
    }
    #center {
        float:left;
        width:100%;
        max-width: initial; 
        background-color:#00AA00;
    }
    #right {
        float:right;
        width: 185px;
        background-color:#00FF00;
    }

还有这个Html：

    <div  id="center">
        <div id="left">
            left
        </div>
        center
        <div id="right">
                right
        </div>
    </div>

在线测试：http://jsfiddle.net/9PFPm/

【讨论】：