三个 DIV 彼此相邻，具有流畅的水平宽度答案

【问题标题】：Three DIVs next to each other with fluid horizontal width三个 DIV 彼此相邻，具有流畅的水平宽度
【发布时间】：2011-10-13 04:22:52
【问题描述】：

我需要知道如何将所有三个相邻的 div 与所有不同的背景图像对齐，并且中心的一个需要为 989px，左 div 和右 div 的宽度无关紧要。

【问题讨论】：

noupe.com/css/9-timeless-3-column-layout-techniques.html

标签： html width alignment

【解决方案1】：

<style type="text/css">
  #wrapper {
  }

  #wrapper div {
    float : left;
  }

  #wrapper #left {
    width : 300px;
    background-image : "/path/to/an_image";
  }
  #wrapper #center {
    width : 989px;
    background-image : "/path/to/another_image";
  }
  #wrapper #left {
    width : 200px;
    background-image : "/you/get/the/idea";
  }
</style>

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

【讨论】：

【解决方案2】：

简而言之..http://jsfiddle.net/hobobne/qyGC5/

<style>
.sides {display: inline-block; width: 100px; border: 2px dotted green;}
#main {display: inline-block; width: 200px; border: 2px dotted blue;} /* you can change this to 989px */
</style>
<div class="sides">side 1</div><div id="main">main</div><div class="sides">side 2</div>

编辑：最终解决方案：http://jsfiddle.net/hobobne/qyGC5/4/

【讨论】：

感谢您的回复，但是当我尝试应用此方法时，它可以工作，但是当我缩小时它不会向两侧移动。当我缩小时，我还需要它居中。
您最初的问题没有说明任何内容。如果需要居中，则：jsfiddle.net/hobobne/qyGC5/1
我现在把所有的 div 都对齐了，虽然我需要在缩小页面时拉伸左右 div。中间的 div 标签需要是 989px 并且在中间。
在缩小页面下解释你的意思。您的意思是侧面容器需要具有动态宽度？并且中心容器必须垂直居中吗？
有些人的屏幕比我自己大，所以我需要左右 div 标签自动拉伸以适应访问我网站的人的屏幕。虽然中间的 div 标签需要一直在页面的中间。