兩個固定寬度的 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

這里有一個工作的一個 。

使用保證金：0自動; 會在大多數時間讓你的元素居中。 （快速注意：您的元素必須具有聲明的寬度才能生效。）

保證金：0自動; 規則是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

你可以試試這個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%;
}

Answer 6

我參加晚會遲到了，還是來吧。

這可以使用 flexbox 來完成。

HTML

<div class="flex">
  <div class="fixed-div"></div>
  <div class="dynamic-div"></div>
  <div class="fixed-div"></div>
</div>

CSS

.flex {
  display:flex;
 }

.fixed-div {
  width:30px;
  background-color:blue;
  height:200px;
 }

.dynamic-div {
  width:100%;
  background-color:red;
  height:200px;
  margin: 0px 10px;
 }

您可以在此處簽出實施。