Home >Web Front-end >HTML Tutorial >~Can I ask about the format of
? ~_html/css_WEB-ITnose
~Can I ask about the format of ? ~_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:06:261193browse
<div class="clearfix"> <div id="dvItemList" class="l_height_30 clearfix float_l " style="height:30px;"> <span class="float_l"><b>部门：</b></span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> </div> <div><input name="Search" type="button" class="bt_search" value="选择" /></div></div>
Initial state
After adding a lot of 45a2772a6b6107b401db3c9b82c049c2, the div will not automatically change height, which affects other divs.
Add a few 45a2772a6b6107b401db3c9b82c049c2, as long as they are in one line, the style will be correct.
1. The 45a2772a6b6107b401db3c9b82c049c2 in dvItemList is automatically added according to the selection button, and the function has been implemented.
2. There is a problem with the style after adding 45a2772a6b6107b401db3c9b82c049c2. The select button will overlap with the added 45a2772a6b6107b401db3c9b82c049c2.
Question,
How to make the add button follow the added 45a2772a6b6107b401db3c9b82c049c2? And dvItemList can automatically change the height according to the number of 45a2772a6b6107b401db3c9b82c049c2, will it not affect the following dc6dce4a544fdca2df29d5ac0ea9906b?
Reply to discussion (solution)
Click Add to see if the following effect is achieved
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style>.warp{width:600px;margin:100px auto;}.box{ width:600px;}.cf:after{content:'';display:block;clear:both;}.cf{zoom:1;}.box .dep{float:left;}.box .dep b{float:left;height:30px; }.box .dep span{float:left;height:28px;line-height:28px;padding:0 10px;border:solid 1px #3F9;margin-right:10px;margin-bottom:10px;}.box .search{float:left;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script>$(function(){ $('.bt_search').click(function(){ $('.dep').append('<span>测试数据</span>') });})</script></head><body><div class="warp"><div class="box cf"> <div class="dep"> <b>部门：</b> <span>上海教育局基教处</span> <span>上海教育局基教处</span> <span>上海教育局基教处</span> <span>上海教育局基教处</span> </div> <div class="search"> <input name="Search" type="button" class="bt_search" value="添加" /> </div></div><div class="down"> 我是下面的DIV</div></div></body></html> If the button is Keep the line break, you can only adjust the html structure, move the button inside
Try to keep your original style name, modify it as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.float_l{float:left;}.mr_10{margin-right:10px;}.l_height_30{line-height:30px;}.Classification{float:left;border:1px solid #ccc;}.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear: both;}</style></head><body><div class="clearfix"> <div id="dvItemList" class="l_height_30 clearfix" > <span class="float_l"><b>部门：</b></span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <div class="float_l"><input name="Search" type="button" class="bt_search" value="选择" /></div> </div> </div><div><input type="text" /> <input type="button" value="搜索" /></div></body></html> Use relative positioning
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
- WBOYOriginal
- 2016-06-24 12:06:261193browse
<div class="clearfix"> <div id="dvItemList" class="l_height_30 clearfix float_l " style="height:30px;"> <span class="float_l"><b>部门：</b></span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> </div> <div><input name="Search" type="button" class="bt_search" value="选择" /></div></div>
Initial state
After adding a lot of 45a2772a6b6107b401db3c9b82c049c2, the div will not automatically change height, which affects other divs.
Add a few 45a2772a6b6107b401db3c9b82c049c2, as long as they are in one line, the style will be correct.
1. The 45a2772a6b6107b401db3c9b82c049c2 in dvItemList is automatically added according to the selection button, and the function has been implemented.
2. There is a problem with the style after adding 45a2772a6b6107b401db3c9b82c049c2. The select button will overlap with the added 45a2772a6b6107b401db3c9b82c049c2.
Question,
How to make the add button follow the added 45a2772a6b6107b401db3c9b82c049c2? And dvItemList can automatically change the height according to the number of 45a2772a6b6107b401db3c9b82c049c2, will it not affect the following dc6dce4a544fdca2df29d5ac0ea9906b?
Reply to discussion (solution)
Click Add to see if the following effect is achieved
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style>.warp{width:600px;margin:100px auto;}.box{ width:600px;}.cf:after{content:'';display:block;clear:both;}.cf{zoom:1;}.box .dep{float:left;}.box .dep b{float:left;height:30px; }.box .dep span{float:left;height:28px;line-height:28px;padding:0 10px;border:solid 1px #3F9;margin-right:10px;margin-bottom:10px;}.box .search{float:left;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script>$(function(){ $('.bt_search').click(function(){ $('.dep').append('<span>测试数据</span>') });})</script></head><body><div class="warp"><div class="box cf"> <div class="dep"> <b>部门：</b> <span>上海教育局基教处</span> <span>上海教育局基教处</span> <span>上海教育局基教处</span> <span>上海教育局基教处</span> </div> <div class="search"> <input name="Search" type="button" class="bt_search" value="添加" /> </div></div><div class="down"> 我是下面的DIV</div></div></body></html> If the button is Keep the line break, you can only adjust the html structure, move the button inside
Try to keep your original style name, modify it as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.float_l{float:left;}.mr_10{margin-right:10px;}.l_height_30{line-height:30px;}.Classification{float:left;border:1px solid #ccc;}.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear: both;}</style></head><body><div class="clearfix"> <div id="dvItemList" class="l_height_30 clearfix" > <span class="float_l"><b>部门：</b></span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <span class="Classification mr_10">上海教育局基教处</span> <div class="float_l"><input name="Search" type="button" class="bt_search" value="选择" /></div> </div> </div><div><input type="text" /> <input type="button" value="搜索" /></div></body></html> Use relative positioning
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