Home > Article > Web Front-end > 用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:301259browse
先看代码
<div id="formpanel"> <form> <div id="username_field"> <div id="usernamepic"> <img src="images/images/images/username_06.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div id="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> <div id="password_field"> <div id="usernamepic"> <img src="images/images/images/images/password_09.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div id="inputfield"> <input type="text" style="max-width:90%" /> </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;} 现在出现的问题是我想出现这样的结果
但是却出现了这样的结果
我在password中设置margin-top却不管用，这是为什么？我想在两个input中间空出24个像素。
回复讨论(解决方案)
#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"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div class="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/images/password_09.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div class="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> </form> </div></body></html> 最快的方法就是：
#password_field{
float:right;
width:340px;
margin-top:24px;
}
希望对你有帮助，欢迎回访!!
用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，
-
用户名：
-
密码：
简单东西不要复杂化，html上面的足矣。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何做出这种效果？_html/css_WEB-ITnoseNext article：checkbox和下拉列表的样式问题_html/css_WEB-ITnose