【问题标题】:aligning multiple divs - left, center and right对齐多个 div - 左、中和右
【发布时间】:2011-01-26 15:35:24
【问题描述】:

我的网站如下所示:

[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][                             ]

【问题讨论】:

    标签: css html css-float


    【解决方案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

    【讨论】:

      【解决方案2】:

      解释一下:这里的 div:left 不能使用“clear:left”,因为它会在 2 个“left” div 之间换行。

      我认为您最好的选择是创建“包装器”:左包装器、中心包装器和右包装器(与上面的左、右和中心相同)。然后你可以将 child-div 放入“left-wrapper”,100% 宽度,没有浮动的东西。

      【讨论】:

        【解决方案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>
        

        【讨论】: