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. c++ std::string.c_str()

    语法: const char *c_str();搜索 c_str()函数返回一个指向正规C字符串的指针, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过 ...

  2. 字符串匹配的KMP算法详解及C#实现

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  3. Dedecms最新版本存储型XSS

    由于编辑文章的模板参数 typeid2可控,导致存储XSS发生. dedecms/dede/templets/article_edit.htm页面316-325行代码如下: <tr> &l ...

  4. HTML 5 websocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  5. JavaScript实现全排列

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> ...

  6. Socket网络编程(2)--服务端实现

    中秋了,首先祝大家中秋快乐,闲着无事在家整一个socket的聊天程序,有点仿QQ界面,就是瞎折腾,不知道最后是不是能将所有功能实现. 如果你对socket不了解,请看这篇文章:http://www.c ...

  7. C#常用函数→ASP.NET篇

    C#常用函数→ASP.NET篇 转载地址→http://www.cnblogs.com/superfang/archive/2008/07/02/1233706.html 以前我都是"原文地 ...

  8. JS待定···

    <select name="selgroup" id="selSendGroup" onchange="selSendGroupTest(thi ...

  9. Windows主机里利用VMware安装Linux(CentOS)虚拟机,Host-only连接上网方式详解

    关于Host-only指的是主机与虚拟机之间的互联,因此虚拟机是不能连网的,若需要连网则需要使用NAT模式: Host-only模式实现联网得考虑如下配置过程: 附:VMware虚拟机三种网络模式(B ...

  10. java类的加载过程

    1.类的加载顺序 (1)JVM在首次加载类时会对  静态初始化块.静态成员变量. 静态方法进行一次初始化. (2)只有在调用new方法时才会创建类的实例. (3)对象创建过程: 首先执行父类(如果有) ...