～<DIV><SPAN>のフォーマットについて聞いてもいいですか？ ~_html/css

～

のフォーマットについて聞いてもいいですか？ ~_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:06:26

オリジナル

1145 人が閲覧しました

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

ログイン後にコピー

初期状態

を大量に追加した後、div は高さを自動的に変更せず、他の div に影響を与えます。

いくつかのを追加します。それらが 1 行に収まっている限り、スタイルは正しくなります。

1. dvItemList のが選択ボタンに応じて自動で追加される機能が実装されました。
2. 追加後のスタイルに問題があり、追加したと選択ボタンが重なってしまいます。

質問、
追加されたに追加ボタンを追従させるにはどうすればよいですか?また、dvItemList はの数に応じて高さを自動的に変更できますが、次の

には影響しないでしょうか?

ディスカッションに返信 (解決策)

クリックして追加して、次の効果があるかどうかを確認してください

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

ログイン後にコピー

ボタンが折り返されないようにしたい場合は、HTML 構造を調整してボタンを移動するだけですinside
あなたを維持してみてください。元のスタイル名は次のように変更されます:

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

ログイン後にコピー

相対位置を使用します