三個div並排，內部div寬度為100％

Question

兩個外部div需要始終保持特定的大小，其中中心div需要適合外部div之間的空間。 有人能指出我正確的方向嗎

Answer 1

在這里，希望對您有所幫助。 http://jsfiddle.net/QZ7ug/

HTML：

<div id="container">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

CSS：

body {
    margin: 0;
    background-color: #BADA55;
}

[id^=container] { 
    margin: 20px 0;
    width: 1000px;
    overflow: hidden;
}

div > div {
    height: 100px;
    float: left;
}

.content {
    width: 570px;
    background-color: #f1f1f1;
}

.content:first-child, .content:last-child {
    width: 785px;
}

.left, .right {
    background-color: #f9f9f9;
    width: 215px;
}

閱讀材料。

1. pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm
2. wickham43.net/threecolumns.php

據我所知，第一個列表項正是您所追求的：

HTML：

<div class="wrapper">
    <div class="wrapmiddle">      
    <div class="middle">middle</div>
</div>
    <div class="left">left</div>        
<div class="right">right</div> 
</div>

CSS：

body {
   padding: 0px;
   margin: 0px;
}

.wrapper{
   width: 100%;
   margin: 0 auto;
}

.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}

.wrapmiddle{
   float: left;
   width: 100%;
   background-color: #fff
}

.middle{
   margin-right:256px;
   margin-left:256px;
   background-color: #afeeee;
   height: 200px;
}

.left{
   float: left;
   width: 256px;
   margin-left: -100%;
   background-color: #cfcfcf;
   height: 200px;
}

.right{
   float: left;
   width: 256px;
   margin-left: -256px;
   background-color: #cfcfcf;
   height: 200px;
}

.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}

這是一個JSFiddle： http://jsfiddle.net/bq485/ : http://jsfiddle.net/bq485/

Answer 2

這是使用前面提到的html的一個，盡管jQuery會收集2個側div的寬度並從容器中減去它們的寬度，然后將其分配給中心div。 我假設您需要它不是百分比寬度，否則您可以為它們指定寬度。 我還計算了左側和右側的寬度，以使您想改變其大小。 這也沒有響應，因此它是在頁面加載時計算的，但是如果您重新調整屏幕大小，它將損壞。

$(document).ready(function () {
  var contWidth = $('#container').width();
  var leftWidth = $('.left').width();
  var rightWidth = $('.right').width();
  var finalWidth = contWidth - leftWidth - rightWidth;

  $('.content').width(finalWidth);
});

這是一支筆