How to align 2 div with forms in_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-20 20:15 出处：网络

相关专题：css forms

<style type="text/css">
#left {
float:left;
background: red;
width:10开发者_开发问答0px;
}

#right {
width:102px;
height:102px;
border:1px solid black;
}

</style>

<div id="left">
<form action="">
    <input type="text" />
    <input type="text" />
    <input type="text" />
</form>
</div>
<div id="right">
<form action="">
    <input type="text" />
    <input type="text" />
    <input type="text" />
</form>
</div>

So i can't have a float:left worked with forms in the div. Do you have a solution ?

Float the #right as well.

 body {
    width: 202px;
    }

    #left { 
    float:left; 
    background: red; 
    width:100px; 
    }

    #right {
    width:102px;
    height:102px;
    border:1px solid black;
    float: right;
    }

    </style>
    <body>
    <div id="left">
    <form action="">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </form>
    </div>
    <div id="right">
    <form action="">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </form>
    </div>
    </body>

Try wrapping both div's in the same parent div and then floating:

<style type="text/css">
#left {
float:left;
background: red;
width:100px;
}

#right {
float: right;
width:102px;
height:102px;
border:1px solid black;
}

</style>

<div>
    <div id="left">
    <form action="">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </form>
    </div>
    <div id="right">
    <form action="">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </form>
    </div>
</div>