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

阅读材料。

pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm
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/

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

Here's a pen

三个div并排，内部div宽度100％

2 个答案: