Question

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

CSS ：

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

Answer 1

为此目的，你真的不需要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，我在那里给方框上色，以便您轻松区分它们

Answer 2

此类布局的一个简单选项是转到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;
}

Answer 3

我用这种方式对它进行排序。

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

Answer 4

演示：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 个答案: