现象:
当改变浏览器宽度变小时,常常因为控件太多,导致改变布局,使得混乱不堪。
代码:
<script type="text/javascript"> $(document).ready(function () { $("#op_div").css("padding-top", $("#search_div").height() + 5); //div自动高度 }); </script> <div id="search_div" class="tt-attach" style="height: 80px;"> <dl> <dd> 学号:</dd> <dt> @Html.TextBox("No_Search", "", new { style = "width:135px;", title = "请输入学号进行搜索" })</dt> </dt> </dl> <dl> <dd> 姓名:</dd> <dt>@Html.TextBox("Name_Search", "", new { style = "width:135px;", title = "请输入姓名进行搜索" })</dt> </dl> <input id="btnSearch" class="btns" value="搜索" type="button" /> </div> <div id="op_div" style="clear:both;"></div> //"clear:both;"清除浮动,避免改变之后内容的布局
CSS:
.tt-attach dl { width: 220px; display: block; float: left; height: 25px; line-height: 30px; padding: 0px; } .tt-attach dl dd { width: 70px; display: block; float: left; height: 25px; line-height: 30px; margin: 0px; text-align: right; padding: 0px; } .tt-attach dl dt { width: 150px; display: block; float: left; height: 25px; line-height: 30px; margin: 0px; text-align: right; padding: 0px; } .tt-attach .btns { display: block; float: left; padding: 0px; margin-left: 10px; margin-top: 5px; }