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の新機能の有無にかかわらずそれを行う方法は?

更新: 固定幅、たとえば200pxです#L。のウィンドウの幅は同じです (本文のマージンは無視されます) の左の境界線は の右の境界線に接し、の右の境界線は の左の境界線に接しています。#R#container#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 に答える