html - 在html中将div划分为左，右，下

Question

这是我想要的布局，

我用代码做了一些，但我不确定之后该怎么做。

[html]

  <div id="content">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="bottom">bottom</div>    
    </div>

[CSS]

  #content{
        /* the width in here will be changed 
        width: this requirment will be changed
        i dont' want to type my left, right content static
        is there a way? */
    }
    #left{
        float:left;
        width: 50px;
    }
    #right{
        float:left;
        width: 50px;
    }
    #bottom{
        /*what do i have to do in here?
        float:*/
    }

Answer 1

你可以这样做:

在#bottom 上设置clear:both。将 width:50% 添加到 #left/#right。

最后，指定元素的边框并添加 box-sizing 以便将边框包含在元素的宽度计算中。

jsFiddle example

#content {
    border:1px solid black;
}
#content > div {
    height:100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#left {
    float:left;
    width: 50%;
    border-right:1px solid black;
}
#right {
    float:right;
    width: 50%;
}
#bottom {
    border-top:1px solid black;
    clear: both;
}