6

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>

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>​​​​​​

jsフィドル

于 2012-08-11T14:50:19.390 に答える