~Can I ask about the format of

? ~_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:06:26

Original

1214 people have browsed it

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

Copy after login

Initial state

After adding a lot of , the div will not automatically change height, which affects other divs.

Add a few , as long as they are in one line, the style will be correct.

1. The 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 . The select button will overlap with the added .

Question,
How to make the add button follow the added ? And dvItemList can automatically change the height according to the number of , will it not affect the following

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>

Copy after login

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>

Copy after login

Use relative positioning