Question

在下面的布局中，我希望div1和div2位于同一行，但在下一行（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>

Answer 1

使用<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

如何强制div到下一行

1 个答案: