1个固定宽度div和两个响应div

Question

我正在寻找一种方法，使固定宽度的div居中显示，并在div左右分别调整大小以填充显示。 我目前正在使用javascript window.resize函数完成此操作。 我希望div调整大小而不是仅从屏幕溢出的原因是，我实际上希望这些div内的图像进行压缩和扩展。 有没有办法我可以用CSS做到这一点？

这是我当前标记的一个示例：

的HTML

<body>
  <div id="wrapper">
    <div id="center">
      <div id="left"></div>
      <div id="right"></div>
    </div>
  </div>
 </body>

的CSS

body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}

#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}

#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}

#left {
position: absolute;
top: 0px;
left: -610px;  //I do want slight overlap
width: 630px;  //full width of image
height: 100%;
overflow: hidden;
}

#right{
position: absolute;
top: 0px;
right: -610px;  //I do want slight overlap
width: 630px;  //full width of image
height: 100%;
overflow: hidden;
}

javascript

$(window).resize(function(){
  var browser_width = $(window).width();
  if(browser_width >1100){ //below this width stop compressing
    var width = ((browser_width - 1000)/2)+ 20;
    $('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
    $('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
  }
});

Answer 1

您可以使用table-cell （IE8 +）或flex （IE10）来实现。

这是 table-cell的示例。

HTML：

<div id="wrapper">
    <div id="left">a</div>
    <div id="center">a</div>
    <div id="right">a</div>
</div>

CSS：

#wrapper {
    display: table;
    width: 100%;
}
#left, #center, #right
{
    display: table-cell;
}

#center {
    width: 400px; /*fixed*/
    background-color: yellow;
}
#left {
    background-color: red;
}
#right {
    background-color: blue;
}

如果视图端口的宽度小于固定宽度，则表不会溢出，而是会缩小列（固定列将尝试占用尽可能多的空间）

1个固定宽度div和两个响应div

问题描述

1 个解决方案

解决方案1
0 2013-10-12 18:57:09

1个固定宽度div和两个响应div

问题描述

1 个解决方案

解决方案1 0 2013-10-12 18:57:09

解决方案1
0 2013-10-12 18:57:09