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>

编辑并列DIV的更多相关文章

  1. 可编辑的DIV -编辑器

    找了好多,没几个好用的,都或多或少有问题 目前这个最好用..  不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取  $ ...

  2. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. 可编辑的div -> 编辑框

    操作可编辑的div中,无可厚非,怎么获取当前光标位置,复制,粘贴等知识是必须要懂得,下边这个链接里面对其有详细的解释: 请点这里 想看详细的例子请点击这里

  4. js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js实现类似微信网页版在可编辑的div中粘贴内容时过滤剪贴板的内容,光标始终在粘贴内容后面,以及将光标定位到最后的方法

    过滤剪贴板内容以及定位可编辑div光标的方法: <!DOCTYPE html><html lang="en"><head>  <meta ...

  6. 移动端的坑 之 在可编辑的div中实现placeholder

    1.当我们个  div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的 <d ...

  7. 插入并列div使其居中

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  8. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  9. html 两个并列div样式

    1.html 代码 <html> <head> <link rel="stylesheet" href="cs2.css"> ...

随机推荐

  1. ucenter实现原理

    其实Ucenter实现同步登陆的原理就是cookie,一个应用登陆成功之后,向Ucenter传递数据(post方式),让Ucenter通知其他的应用也设置 cookie(get方式),这样用户在访问其 ...

  2. EDdb 是ED数据

    eddb  是ED数据统计汇总软件的简称,用于统计汇总企事业单位的各类信息数据. 采用Excel界面,操作简单. 对各类信息数据,均可以自定义数据格式,通过internet联网,收集各类信息数据,并通 ...

  3. whereis命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...

  4. 一步一步教你将普通的wifi路由器变为智能广告路由器

    一步一步教你将普通的wifi路由器变为智能广告路由器 相信大家对WiFi智能广告路由器已经不再陌生了,现在很多公共WiFi上网,都需要登录并且验证,这也就是WiFi广告路由器的最重要的功能.大致就是下 ...

  5. select函数

    select函数: http://baike.baidu.com/view/3421856.htm select函数   目录 概况 操作程序 宏解释 socket读写 概况 select()的机制中 ...

  6. sql数据库批量替换dedecms内容关键字

    之前写了一篇dedecms后台批量替换文章中的关键词,这边我们介绍一下用sql数据库批量替换dedecms内容关键字,当然要求你对数据库比较熟悉,修改前请自行做好备份. 1.更改文章中的内容 upda ...

  7. Java中的封装

    在前面的一些日子里,一只都在学习C#语言,使用C#在做一些小项目的,今天转到了Java的学习,还是感觉有点的不习惯,没有以前的中文界面的,全是英文.写起代码来都一直保持着C#中的编码的习惯,但是学习J ...

  8. codeforces 258div2 B Sort the Array

    题目链接:http://codeforces.com/contest/451/problem/B 解题报告:给出一个序列,要你判断这个序列能不能通过将其中某个子序列翻转使其成为升序的序列. 我的做法有 ...

  9. CoreLoation

    - (CLLocationManager *)locationManager { if (!_locationManager) { _locationManager = [[CLLocationMan ...

  10. index and polymorphic

    http://guides.rubyonrails.org/association_basics.html#polymorphic-associations class CreateStars < ...