Home >Web Front-end >HTML Tutorial >After using float, the top and bottom order between div blocks is wrong_html/css_WEB-ITnose
After using float, the top and bottom order between div blocks is wrong_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:08:301357browse
Let’s look at the code first
<div id="formpanel"> <form> <div id="username_field"> <div id="usernamepic"> <img src="images/images/images/username_06.jpg"/> </div> <div id="inputfield"> <input type="text" style="width:227px; height:22px; border-color:b9b9b9" /> </div> </div> <div id="password_field"> <div id="usernamepic"> <img src="images/images/images/images/password_09.jpg"/> </div> <div id="inputfield"> <input type="text" style="width:227px; height:22px; border-color:b9b9b9" /> </div> </div> </form> </div>
#formpanel{ width:341px; height:135px; margin-left:auto; margin-right:auto; }#username_field{ margin-top:0px; width:340px; }#usernamepic{ float:left; margin-top:0px; margin-left:0px;}#inputfield{ float:right; margin-top:0px; margin-right:0px; width:228px; height:27px;}#password_field{ width:340px;} The problem now is that I want to have such a result
But it has such a result
I am Setting margin-top in password does not work. Why? I want to leave 24 pixels between the two inputs.
Reply to discussion (solution)
#password_field{
margin-top:10px;
width:340px;
}
<html><head> <title></title> <style type="text/css">#formpanel{ width:341px; height:135px; margin-left:auto; margin-right:auto; }.field-container{ margin-top:0px; width:340px; position: relative;}.usernamepic{ position: absolute; margin-top:0px; margin-left:0px;}.inputfield{ margin-top:0px; margin-right:0px; width:228px; height:27px;}.inputfield input{padding-left: 24px;} </style></head><body><div id="formpanel"> <form> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/username_06.jpg"/> </div> <div class="inputfield"> <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" /> </div> </div> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/images/password_09.jpg"/> </div> <div class="inputfield"> <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" /> </div> </div> </form> </div></body></html> The fastest way is:
#password_field{
float:right;
width:340px;
margin-top:24px;
}
I hope it is helpful to you, welcome to visit again!!
Why do we need two different layers and unnecessary styles when the username and password are the same layout?
b94e4bb120d6a012acf19630419362c6ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c64a249f0d628e2318394fd9b75b4636b1Username: 473f0a7621bec819994bb5020d29372ac1a436a314ed609750bd7c7d319db4da9b227a9c1dc1fae56af218843db05e0803f5e666463591f0c6a59c067651fe4fbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c64a249f0d628e2318394fd9b75b4636b1Password:473f0a7621bec819994bb5020d29372ac1a436a314ed609750bd7c7d319db4dac5f07f931ba48cdd4c71e1f32916364d2e9b454fa8428549ca2e64dfac4625cdbed06894275b65c1ab86501b08a632eb< ;/ul>16b28748ea4df4d9c2150843fecfba68
Don’t complicate simple things, HTML is enough.