javascript - 两个固定宽度的 div 和另一个动态大小的 div

Question

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

左边的盒子应该放在左边，右边的盒子放在右边。它们都应该有固定的宽度，例如 200 像素。中间的 div 应该取两者之间的大小。它的宽度未设置，但它采用剩余的宽度。

谢谢。

Answer 1

这是演示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

这是一个工作的。

使用边距：0 自动；大多数时候会让你的元素居中。（快速说明：你的元素必须有一个声明的宽度才能工作。）

边距：0 自动；rule 是 0 上下边距和自动左右边距的简写。自动左右边距协同工作，将元素推入其容器的中心。

边距：0 自动；设置并非在每种居中情况下都可以完美运行，但在很多情况下都可以使用。
参考：你不能用 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

你可以试试这个只有 html 和 css 的FIDDLE，没有 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%;
}

演示

更新：

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

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

演示

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