Question

我的网站如下：

[left div][          center div         ][right div]
          [                             ][right div]
          [                             ]
          [                             ]
          [                             ]
          [                             ]

如果我尝试在左边添加另一个div，它看起来像这样：

[left div]
[        ]
[left div][          center div         ][right div]
[        ][                             ][right div]
[        ][                             ]

我的css：

    #left{
    width: 140px;
    height: auto;
    float: left;
    clear: left;
    }

    #center{
    float: left;
    width:600px;
    padding: 10px;
    }

    #right {
    float: right;
    height: auto;
    width: 140px;
    }

如何让它看起来像这样

[left div][          center div         ][right div]
[        ][                             ][right div]
[left div][                             ]
[        ][                             ]
[        ][                             ]
[left div][                             ]

Answer 1

您可以使用以下内容：

<强> HTML

<div id="wrapper">
    <div class="left"></div><div class="center"></div><div class="right"></div>
    <div class="left"></div> <div class="right"></div>
  </div>

<强> CSS

   #wrapper {width:886px; overflow:hidden}
  .left {float:left; width:140px; height:200px; background:red;border:1px solid black;}
  .right {float:right;width:140px; height:200px; background:blue;border:1px solid black;}
  .center {float:left;width:600px; height:200px; background:grey;border:1px solid black;}

直播示例： http://jsbin.com/eroka5/2

Answer 2

解释这个想法：你不能使用“clear：left”作为div：left here，因为它会在2“left”div之间创建一个新行。

我认为你最好的选择是创建“包装器”：左包装器，中心包装器和右包装器（左上，右上和中心相同）。然后你可以将child-div放入“左包装”，100％宽度，没有浮动的东西。

Answer 3

以下是实现此目标的示例代码。

<html>
<head>
<style>
#left,#center,#right{
width:33%;
float:left;
}
#bottomleft,#bottomright
{
width:50%;
float:left;
}

</style>
</head>
<body>
<div width="1024px"> 
 <div id="left">left</div><div id="center">center</div><div id="right">right</div>
<div>
<div>
 <div id="bottomLeft" >bottomleft</div> <div id="bottomright">bottomright</div>
</div>
</body>
</html>

对齐多个div - 左，中，右

3 个答案: