div对齐实例以及注意事项

最近在做前端的小测试的时候，总结了下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">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP: <input type="text" name="Ip" />
</div>
   <div style="padding:1px;float:left;width:33%;text-align:center">
        &nbsp;&nbsp;&nbsp;&nbsp;传输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内内容的居中、左对齐、右对齐。