Question

我想制作一个经典的3列布局：

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

我被要求使用以下html结构：如您所见，Main div是#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的右边框触摸{{{ 1}}。

Answer 1

这是我为实现这种布局所要做的。

#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

Answer 2

最终像this一样？

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

Answer 3

编辑：这实际上可以用于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;
}

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

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

3 个答案: