Question

我正在尝试建立一个3列网站。左侧和右侧列是两侧连接的小240px div。中间div是一个可伸缩的区域，其中所有元素都根据浏览器的大小拉伸。

到目前为止，我已将其设置为：

body, html {
height:100%;
} 

body {
margin:0;
}

 .container {
  background:orange;
  height:100%;
  width:100%;
  overflow:hidden;
 }

.left {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  left:0;

 }

.middle {
  width:100%;
  height:100%;
  background:orange;
  }

.right {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  }

并且：

 <div class="container">

  <div class="left"></div>
  <div class="middle">

     // all the content

  </div>
  <div class="right"></div>

  </div><!--container-->

如何让中间列中的内容保持在左列和右列之间？我正在考虑使用margin-left和margin-right但我觉得这不是一个好方法这样做。

直播：

http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa

Answer 1

如果您支持现代浏览器，我会尝试使用flexbox：

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
}
.container div {
  flex-grow: 1; 
  height: 50px;
}
.side {
  max-width: 240px;
  min-width: 240px;
  background: red;
}

<div class="container">
  <div class="side"></div>
  <div class="middle">
     // all the content
  </div>
  <div class="side"></div>
</div>

jsfiddle example

Flexbox resource

Answer 2

您不需要使用margin-left，但margin-right将非常有用。我会使用float：left并摆脱左侧边栏上的位置：绝对，并使用margin-right：240px并摆脱宽度：中间div上的100％。

CSS：

.left {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  top:0;
  left:0;
  float:left;
}

.middle {
  height:100%;
  background:orange;
  margin-right: 240px;
}

.right {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
}

Answer 3

使用Twitter Bootstrap to do n-column design，它将为您节省大量的工作。右键单击检查我提供的示例页面上的HTML代码，您将看到所有需要做的就是将类设置为几个div，并且当您包含引导程序JS / CSS文件时它会起作用。

如何建立响应式3列网站？

3 个答案: