编辑并列DIV
html编辑控件,编写3个div并行,先看一下效果,如下图:
我需要将整个白色部分作为一个整体,编辑控件使用,其实使用到的就是div中的float:left属性,并且定义好宽度。css 部分代码如下:
.divtitle-item1{width:58%; float:left; } .divtitle-item2{width:21%;float:left;} .divtitle-item3{width:21%;float:left;}
但是多个当多个白色控件使用的时候,又出现上浮的情况,开始的时候,我是使用ul中的li来控制工具列表,但是发现还是不行,在位一行,所以我就直接使用源html代码,然后编辑相距距离Margin,问题解决;
整个是控件最外部div样式:
.divtitle{width:100%;float:left;font-size:1.0rem; font-weight:bold; margin:10px 0px 0px 0px; display:inline;}
整个白色控件的html代码如下:
<div class="divorder"> <hr style="margin:0px; padding:0px;"/> <div class="divbalance-div1"> <div class="divorder-div2"> <p class="divorder-p1">西餐厅现金优惠券</p> <p>有效期至2013.08.08</p> </div> <div class="divtitle-item2"> <p class="divorder-p2">-600</p> </div> <div class="divtitle-item2"> <p class="divorder-p1">未使用</p> </div> </div> <hr style="margin:0px; padding:0px;"/> </div>