div对齐实例以及注意事项
来源:互联网 发布:搞笑视频网站源码 编辑:程序博客网 时间:2024/06/06 14:18
最近在做前端的小测试的时候,总结了下div的多行排列以及内容对齐
1.首先放上效果图以及代码
2.源代码
<div style="padding:4px">
<div style="padding:1px;float:left;width:33%;text-align:center">
企业类型: <input type="text" name="ComType" />
</div>
<div style="padding:1px;float:left;width:33%;text-align:center">
JC代码: <input type="text" name="JCcode" />
</div>
<div style="padding:1px;float:left;width:33%;text-align:center">
公司名称: <input type="text" name="ComName" />
</div>
<div style="clear:both"></div>
<div style="padding:1px;float:left;width:33%;text-align:center">
国检代码: <input type="text" name="GjCode" />
</div>
<div style="padding:1px;float:left;width:33%;text-align:center">
IP: <input type="text" name="Ip" />
</div>
<div style="padding:1px;float:left;width:33%;text-align:center">
传输id: <input type="text" name="PassID" />
</div>
<div style="clear:both"></div>
<hr/>
<div style="padding:1px;text-align:right">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
<hr/>
</div>
3.解释以及注意事项
<div style="clear:both"></div> 这个一定要注意,不加段代码的话,会造成下一个div继续延续上一个div的样式不会自动换行的。
width:33% 为了让div行排列更完美一些,这个有必要加上,要计算好宽度,一行的的比例要小于父div。
text-align:center 控制div内内容的居中、左对齐、右对齐。
- div对齐实例以及注意事项
- 字节对齐,以及一些实例
- layer的小实例以及相关注意事项
- 字节对齐注意事项
- STM32实例之LED灯闪烁控制以及相关注意事项
- 让div居中对齐
- 让div居中对齐
- div底部对齐
- 让div居中对齐
- div内容底部对齐
- DIV居中对齐
- DIV 居中对齐
- div 右对齐
- div靠底边对齐
- bootstrap div 右对齐
- div 中心对齐
- div css 布局注意事项
- CSS div布局注意事项
- dropload.js+anjular实现的无线下拉。。。。
- tpf 团队开发vs 多人签入后出现资源冲突
- 对象的作用域,对象方法扩展
- Android WebView的使用集锦(支持Html5)
- Linux下安装mysql
- div对齐实例以及注意事项
- RxJava操作符整理
- C++实验4-输出图形
- c++11并发指南。(转载)
- HTTP 协议 介绍文章集合
- C#将GMT时间格式转换为CST时间格式
- ubuntu16.04下载安装shadowsocks以及qt5+配置chrome的过程记录【转】
- 输出tomcat 日志格式
- sql分页的几种写法