编辑并列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"> ...
随机推荐
- git工作量统计
#!/bin/bash function count() { local insert=0 local delete=0 while read line ;do current=`echo $line ...
- FreeMarker template error!
部署项目后发现以下“FreeMarker template error!”的问题,google.baidu猛一顿搜索无果后开始认真分析异常信息. FreeMarker template error! ...
- Windows 下的.NET+ Memcached安装
转载请标明出处: http://www.yaosansi.com/ 原文:http://www.yaosansi.com/post/1396.html Memcached官方:http://danga ...
- 图解equals与hashcode方法相等/不相等的互相关系
图解:比如equals相等的箭头指向hashcode相等,表示equals相等那么必有hashcode相等.而有两个箭头指向别人的表示可能是其中之一,比如hashcode相等,那么有可能equals相 ...
- vmware, failed to lock the file
电脑死机,进不了桌面,实在不行就重启,但是在运行着虚拟机,重启后打开VMware虚拟机,提示failed to lock the file,进不去了,急阿,里面不少资料呢...问万能的Google,终 ...
- MYSQL主从数据库搭建
sc delete "服务名" 删除服务 环境: (以下是我这次搭建所使用的环境) 主数据库: 系统:ubuntu : MYSQL 5.1.63 :ip:192.1 ...
- HDU 1018 Big Number (数学题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1018 解题报告:输入一个n,求n!有多少位. 首先任意一个数 x 的位数 = (int)log10(x ...
- mac os 安装 pkg-config
wget http://pkgconfig.freedesktop.org/releases/pkg-config-0.29.tar.gz . env LDFLAGS="-framework ...
- mac安装django1.5.4
http://www.iwangzheng.com/ 1.下载安装程序 打开终端输入以下命令 $ wget http://www.djangoproject.com/m/releases/1.5/Dj ...
- PHPStorm+Wamp+Xdebug+Windows7调试代码
Wamp 集成环境 PHPStorm+Xdebug 调试代码 2013.04.16 花了两个小时时间终于 , 配置成功了 ! 我的开发环境如下 , 其它环境也可以参考我的配置 开发环境 : Windo ...