Question

这是我想要的布局，

enter image description here

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

[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

你可以这样做：

在clear:both上设置#bottom。将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;
}

Answer 2

这是你想要的底部div：

#bottom{
    clear: both;
    }

Answer 3

对于#bottom，您需要float:left;width:100px;试一试，看看它是否有效。

如果您不需要更改它们的大小，您也可以尝试使用位置来执行此操作：看起来您不需要。例如：

#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;} 
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}

我觉得第二个会更有信心。

Answer 4

以下是我个人的做法：http://jsfiddle.net/T5fW3/

<div id="content">
    <div id="top">
        <div id="left">
            <div class="container"> Left </div>
        </div>
        <div id="right">
            <div class="container"> Right </div>
        </div> 
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

我使用容器，如果你想添加样式（边框，边距，填充等），他们不会搞砸50％。您现在可以将内容调整为任何大小，并且您的比例仍然相同。

#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: 50%;
}
#right{
    float:left;
    width: 50%;
}
#bottom{
    border: 1px solid black;
    clear: both;
}

.container {
    border: 1px solid black;    
}

容器类和底部id中的边框仅用于说明。如果您要将边框添加到#left或#right，您的布局将会中断。另请注意，我使用50％而不是50px。

将div除以html中的left，right，bottom

4 个答案: