0

我正在寻找一种方法，使固定宽度的 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});
  }
});
4

1 回答 1

0

您可以使用table-cell(IE8+) 或flex(IE10) 来做到这一点。

Here's一个例子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;
}

如果视口宽度小于固定宽度，表格不会溢出，而是列会缩小（固定列会尽量占用空间）

于 2013-10-12T18:57:09.457 回答