项目经验:css控制三个div在同一行展示的效果,float:left
2014-07-21 16:33
393 查看
css:
html代码:
图片效果展示:
/* 动态表样式 表头 */ .dv-table1-content { margin-top: 10px; margin-bottom: 10px; /* margin-left: 20px; */ /* padding-left:10px; */ /* border: solid 1px #3e72b9; */ width: 200px; font-size: 11px; float: left; } .dv-table2-content { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; /* padding-left:10px; */ /* border: solid 1px #3e72b9; */ width: 200px; font-size: 11px; float: left; } .dv-table3-content { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; /* padding-left:10px; */ /* border: solid 1px #3e72b9; */ width: 650px; font-size: 11px; float: left; /* overflow-x:auto; */ }
html代码:
<div id="bianjieshezhiquyu" style="width:1400px"> <!-- ------------入流数据表table1------------- --> <div id="table1" class="dv-table1-content" > <div > <input type="text" style="width:99%; padding:0px; margin:0px"/> </div> <div style="text-align:right;"> <button style="height:20px;" id="calculate1" onclick="calculate();" class="button white medium">导入入流数据</button> </div> <table width="200px" border="1" cellspacing="0" cellpadding="0" class="altrowstable" style="margin:0px auto;"> <tr class='headcolor' > <td >时间</td> <td >流量(m³/s)</td> </tr> </table> </div> <!------------出流数据表table2-------------> <div id="table2" class="dv-table2-content"> <div > <input type="text" style="width:99%; padding:0px; margin:0px"/> </div> <div style="text-align:right;"> <button style="height:20px;" id="calculate2" onclick="calculate();" class="button white medium">导入出流数据</button> </div> <table width="200px" border="1" cellspacing="0" cellpadding="0" class="altrowstable" style="margin:0px auto;"> <tr class='headcolor' > <td >时间</td> <td >流量(m³/s)</td> </tr> </table> </div> <!------------污染源数据表table3-------------> <div id="table3" class="dv-table3-content" style="overflow-x:auto"> <div style="width:200px;"> <input type="text" style="width:99%; padding:0px; margin:0px"/> </div> <div style="text-align:center;width:200px;"> <button style="height:20px;" id="calculate3" onclick="calculate();" class="button white medium">导入污染源数据</button> </div> <table width="100%" border="1" cellspacing="0" cellpadding="0" class="altrowstable" style="margin:0px auto;"> <tr id="trheader" class='headcolor' > <td >时间</td> </tr> </table> </div> </div>
图片效果展示:
相关文章推荐
- 项目经验:css控制div内容居中
- 项目经验:css控制input无边框效果
- div+css布局控制div定位浮动层在背景图片上的半透明阴影效果
- 经验分享:CSS div浮动(float,clear)
- DIV+CSS 综合效果展示
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
- DIV+CSS结合js控制页面滚动的效果
- CSS常用效果实现004——控制div的背景图片的长宽
- CSS DIV制作源码时代官网活动展示效果
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- JS控制css float属性的用法经验总结
- CSS+JS控制图片展示效果
- 通过css来控制div.ul.li的多列显示效果
- div+css经验:float命令详解
- css控制div居中
- 效果直逼flash的Div+Css+Js菜单
- 用DIV+CSS实现文字及面板阴影效果
- CSS布局实例 个非常棒的DIV+CSS导航条效果!
- CSS布局实例 个非常棒的DIV+CSS导航条效果!
- div+css制作企业网站经验收集