6

在下面的布局中，我想div1和div2to 在同一行，但移到div3下一行（下div1）。提前致谢。

<html>
 <body>
<div style="width:50%;">
    <div id="div1" style="float:left; 
                                  background-color:red; 
                                  vertical-align: bottom;">
        <label> This is my label</label><br>
        <input  type ="text">
    </div>
    <div id="div2" style="padding-left:10px;
                                  padding-right:0px;
                                  float:left; 
                                  background-color:green;  
                                  vertical-align: bottom;">
        <label> &nbsp;</label><br>
        <button id="btn" >My button</button>
    </div>
    <div id="div3" style="background-color:yellow;">This is error</div>
</div>
</body>

4

1 回答 1

11

采用<br style="clear: both;"> 

<html>
 <body>
<div style="width:50%;">
    <div id="div1" style="float:left; background-color:red; vertical-align: bottom;">
        <label> This is my label</label><br>
        <input  type ="text">
    </div>
    <div id="div2" style="padding-left:10px;padding-right:0px;float:left; background-color:green;  vertical-align: bottom;">
        <label> &nbsp;</label><br>
        <button id="btn" >My button</button>
    </div>

    <br style="clear: both;"> 

    <div id="div3" style="background-color:yellow; float:none" >This is error</div>
</div>
</body>​​​​​​

jsFiddle

于 2012-08-11T14:50:19.390 回答