2

我想制作一个经典的 3 列布局，如下所示：

|  |      |  |
|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具有固定宽度，例如 200 像素。#container具有相同宽度的 window(ignore body margin) #M的左边框触及 的右边框#L并且#M的右边框触及 的左边框#R。

4

3 回答 3

3

这就是我要实现这种布局的方法。

#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 的固定宽度，您也可以这样做。

JSFIDDLE

于 2013-11-05T15:12:40.317 回答
0

最终像这样的东西？

#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%;
}
于 2013-11-05T15:02:11.447 回答
0

编辑：这实际上可以通过 flexboxes 实现。不过，我真的不想牺牲浏览器对标记顺序的支持。

此解决方案不适#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;
}

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

于 2013-11-05T15:07:54.290 回答