两个固定宽度的div，另一个div与动态大小之间

Question

标题说明了一切。我想要这样的东西：

左框应位于左侧，右侧应位于右侧。它们都应具有固定的宽度，例如200像素。中间div应该采用之间的大小。它的宽度没有设置，但它占用了剩余的宽度。

感谢。

Answer 1

以下是DEMO http://jsfiddle.net/yeyene/GYzVS/

在onReady和onResize上工作得很好。

JS

$(document).ready(function(){
    resizeMid();    
    $(window).resize(function() {
      resizeMid();
    });    
});  

function resizeMid(){
    var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
    $('#middle').css({'width':mid_width});
}

HTML

<div id="main">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>  

CSS

html, body{
    margin:0;
    padding:0;
}
#main {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}
#middle {
    float:left;
    width:100%;
    height:300px;
    margin:0;
    background:blue;
}
#right {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}

Answer 2

这是一个有效的one。

使用 margin：0 auto; 将使您的元素在大多数时间居中。 （快速注意：您的元素必须具有声明的宽度才能生效。）

margin：0 auto; 规则是0上下边距以及自动左右边距的简写。自动左右边距一起工作，将元素推入容器的中心。

margin：0 auto; 设置在每个居中情况下都不能完美运行，但它可以在很多场景中运行。
参考：You Can't Float Center with CSS  

的 HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

<强> CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Answer 3

你可以试试这个FIDDLE只需html和css，不需要javascript

<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>

CSS

div {
    height:500px;
    position:absolute;
    border:0px;
    padding:0px;
    margin:0px;
}
.c1, .c3 {
    width: 200px;
    background-color:red;
}
.c1, {
    left:0px;
}
.c3 {
    right:0px;
}
.c2 {
    margin-left:10px;
    margin-right:10px;
    background-color:blue;
    left:200px;
    right:200px;
}
.container {
    width:99%;
}

Answer 4

<强> [更新]

使用表格，它会调整自己的宽度。浮动风格是第一个出现在我脑海中的，但它没有调整元素的宽度来填补空白。

HTML：

<table>
    <tr>
        <td style="width:10%;"><div id="d1"></div></td>
        <td><div id="d2"></div></td>
        <td style="width:10%;"><div id="d3"></div></td>
    </tr>
</table>

的CSS：

#d1,#d3{
    background-color:red;
    width:100%;
    height:300px;
}
#d2{
    background-color:blue;
    width:100%;
    height:300px;
}
table{
    width:100%;
    height:100%;
}

<强> DEMO

<强>更新

如果你不想使用表或过多的js计算，请使用：

#d1,#d3{
    float:left;
    background-color:red;
    width:10%;
    height:300px;
}
#d2{
    float:left;
    background-color:blue;
    width:80%;
    height:300px;
}

<强> DEMO

Answer 5

我个人会避免使用JS并使用CSS执行此操作。 您可以添加一个#container包装，然后将宽度定义为您想要的任何宽度，然后使用％表示左侧和中间div

以下示例CSS：

<div id="container"> 
        <div id="left-column"> </div>
        <div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
        <div id="right-column"> </div>
</div>

#container{
   float:left;
   width:1000px;
   *background-color:blue;
}
#left-column, #middle-column, #right-column{
        height:500px;
        float:left;
}
#left-column, #right-column {
    width:20%;
    background-color:red;
}

#middle-column {
    background-color:green;
    width:60%;
}