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）执行此操作。

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

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

1个固定宽度的div，带有两个响应div

1 个答案: