中柱液宽答案

【问题标题】：Fluid width of center column中柱液宽
【发布时间】：2014-05-28 00:23:27
【问题描述】：

我有 3 列布局。我正在尝试使中心列具有流体宽度，左右列具有固定宽度 200px。它在我的屏幕上看起来不错，但是当我调整浏览器窗口的大小时，右栏会落在较小的窗口大小上。

CSS：

#content {
    float: left;
    width: 66.8%;
}
#sidebar-left {
    float: left;
    margin-right: 24px;
    width: 200px;
}
#sidebar-right {
    float: right;
    width: 200px;
}

【问题讨论】：

请显示小提琴...
请查看：jsfiddle.net/6PtGq/1
左右栏为红色，中间栏为绿色。
这不是编程问题，而是数学问题。您需要在这里重新思考您的逻辑，并询问您到底想对您的页面做什么。

标签： jquery html css

【解决方案1】：

这种布局的一个简单选择是走display: table 路线：

.wrap {
    display: table; 
    margin: 0 auto;
}

.wrap > div {
    display: table-cell; 
    height: 200px; 
    background: green;
    width: 66%;
}

#sidebar-left, #sidebar-right {
    width: 200px; 
    background: red;
}

【讨论】：

【解决方案2】：

我已经用这种方式排序了。

<div id="wrap">
<div id="sidebar-left"></div>
<div id="sidebar-right"></div>
<div id="content">
<div class="inner"></div>
</div>
</div>

#wrap { overflow:hidden; }
#content {
    padding: 0 200px;
    margin: 0 auto;
}
#content .inner {
    width: 98%;
    margin: 0 auto;
}
#sidebar-left {
    float: left;
    width: 200px
}
#sidebar-right {
    float: right;
    width: 200px
}

【讨论】：

【解决方案3】：

演示：Link

HTML：

<div class="lbar">
    <h1>Left Bar</h1>
    <ul>
        <li>Home</li>
        <li>Development</li>
        <li>Dowload</li>
        <li>Support</li>
    </ul>
</div>
<div class="rbar">
    <h1>Right Bar</h1>
    <ul>
        <li>Peter</li>
        <li>Steve</li>
        <li>Andrew</li>
        <li>Chris</li>
    </ul>
</div>
<div class="middle">
    <h1>Middle</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint</p>
</div>

CSS：

* {
    font-size: 14px;
}
.lbar { 
    float:left ; 
    width:120px; 
    background-color:yellow;
}
.rbar { 
    float:right ; 
    width:120px; 
    background-color:yellow;
}
.middle { 
    margin-left:120px; 
    margin-right:120px; 
    background-color:gray; 
}

【讨论】：

【解决方案4】：

您实际上并不需要 jQuery 来实现此目的。您可以使用普通的旧 css 来利用您的布局。灵活的盒子模型非常适合这种情况，但由于目前缺乏浏览器支持，我不建议这样做。我建议将您的盒子放在带有display:table 的包装中，并给子盒子一个display:table-cell

<div id="wrapper">
    <div class="sidebar left fluid"></div>
    <div class="content fluid"></div>
    <div class="sidebar right fluid"></div>
</div>

然后要并排显示包装元素内的所有框，可以使用以下css...

#wrapper{display:table}
div{height:300px; display:table-cell}
div.content       {  width:100% }
div.sidebar  { width:200px }
.left { float:left }
.right { float:right }
.fluid{display:inline-block}

这是JSFiddler Example，我在其中对方框进行了着色，以便您轻松区分它们

【讨论】：

感谢您的回答，但这并不是我想要的。我希望左右列应始终为 200 像素，这些不应具有流体宽度。我只想让中心内容流畅。
抱歉，我没有正确阅读您的问题。我已经更新了我的答案和 JS Fiddler 中的示例