3列布局，中间列流畅，首先出现在HTML代码中，其他固定宽度

我想做一个经典的三列布局，如下所示：

|  |      |  |
|L |  M   |R |
|  |      |  |

我被要求使用以下 html 结构：如您所见，Maindiv 是 #container 的第一个节点

<body>
  <div id="container">
    <div id="M">Main</div>
    <div id="L">Left</div>
    <div id="R">Right</div>
  </div>
</body>

如何在有和没有 css3 新功能的情况下做到这一点？

更新： #L和#R有一个固定的宽度，比如200px。 #container具有相同的窗口宽度（忽略正文边距），#M的左边框接触#L的右边框，#M的右边框接触#R的左边框。

这就是我要做的来实现这种布局。

#M {
  width: 60%;
  height: 500px;
  margin: 0 auto;
  background: brown;
  position: relative;
  top: 0;
}
#L {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  background: #c1c1c1;
}
#R {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  background: #c1c1c1;
}

这种方式是 100% 响应的，但如果您想要外部div 的固定宽度，您也可以这样做。

吉斯菲德尔

最终像这样的东西？

#M {
  display:inline-block;
  background:red;
  width:33%;
}

#L {
  float:left;
  display:inline-block;
  background:lime;
  width:33%;
}

#R {
  float:right;
  display:inline-block;
  background:yellow;
  width:33%;
}

编辑：这实际上是可以通过弹性框实现的。不过，我真的不想为了标记的顺序而牺牲浏览器支持。

此解决方案不适用于顶部的#M元素..除了使用定位的一些技巧外，我认为这是不可能的。

如果将#M元素移动到底部，这将起作用：

#M {
    background-color: #eeffff;
    height: 200px;
    margin: 0 200px;
}
#L {
    background-color: #ffeeff;
    float: left;
    height: 200px;
    width: 180px;
}
#R {
    background-color: #ffffee;
    float: right;
    height: 200px;
    width: 180px;
}

在这种情况下，除非父容器的宽度是固定的，否则中间的宽度将是灵活的，而左右是静态的。但是，您也可以将#L和#R元素的边距和宽度设置为百分比。

相关内容

最新更新

热门标签：