编辑并列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>
编辑并列DIV的更多相关文章
- 可编辑的DIV -编辑器
找了好多,没几个好用的,都或多或少有问题 目前这个最好用.. 不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取 $ ...
- 并列div自动等高
并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 可编辑的div -> 编辑框
操作可编辑的div中,无可厚非,怎么获取当前光标位置,复制,粘贴等知识是必须要懂得,下边这个链接里面对其有详细的解释: 请点这里 想看详细的例子请点击这里
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现类似微信网页版在可编辑的div中粘贴内容时过滤剪贴板的内容,光标始终在粘贴内容后面,以及将光标定位到最后的方法
过滤剪贴板内容以及定位可编辑div光标的方法: <!DOCTYPE html><html lang="en"><head> <meta ...
- 移动端的坑 之 在可编辑的div中实现placeholder
1.当我们个 div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的 <d ...
- 插入并列div使其居中
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- JS在可编辑的div中的光标位置插入内容或表情
<input type="button" value="插入字符" onclick="document.getElementById('test ...
- html 两个并列div样式
1.html 代码 <html> <head> <link rel="stylesheet" href="cs2.css"> ...
随机推荐
- 有关基于模型的设计(MBD)一些概念和理解(zz)
http://www.matlabsky.com/thread-38774-1-1.html 本文转载于MathWorks中国高级工程师董淑成的帖子内容.为了方便阅读,对原文进行了重新整理编辑. 之前 ...
- Unity 游戏资源ktx转换png
Unity 开发的模型贴图都是.ktx格式的,提取出来的资源,其中的ktx资源,用PVRTexToolGUI.exe可以打开查看,可以发现都是上下颠倒,且被拉伸 直接转为png格式的批处理脚本为: @ ...
- IIS6.0文件解析漏洞小结
今天搞站,本来这个站是aspx的,webserver是IIS6.0的,进入后台之后,发现有一个上传图片的地方,于是,我就上传了一张asp/aspx的一句话图片木马,但是用菜刀连接的时候,没有成功get ...
- java分布式通信系统(J2EE分布式服务器架构)
一.序言 近几个月一直从事一个分布式异步通信系统,今天就整理并blog一下. 这是一个全国性的通信平台,对性能,海量数据,容错性以及扩展性有非常高的要求,所以在系统的架构上就不能简单的采用集中式.简单 ...
- 你无法修改 Git 的历史记录
转自:http://www.oschina.net/news/26241/you-can-not-change-git-history 有时候使用Git工作得小心翼翼,特别是涉及到一些高级操作,例如 ...
- css的一些小技巧!页面视觉差!
相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...
- poj1142.Smith Number(数学推导)
Smith Number Time Limit: 1 Sec Memory Limit: 64 MB Submit: 825 Solved: 366 Description While skimm ...
- [Effective JavaScript 笔记] 第12条:理解变量声明提升
js支持词法作用域,即除了极少的例外,对变量的引用会被绑定到声明变量最近的作用域中. js不支持块级作用域,即变量定义的作用域并不是离其最近的封闭语句或代码块,而是包含它们的函数. 不了解这个会产生一 ...
- java对象与json对象间的相互转换
工程中所需的jar包,因为在网上不太好找,所以我将它放到我的网盘里了,如有需要随便下载. 点击下载 1.简单的解析json字符串 首先将json字符串转换为json对象,然后再解析json对象,过程如 ...
- 浅谈B树
B树即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: ...