编辑并列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>
原文地址:https://www.cnblogs.com/xibei666/p/4415446.html