编辑并列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"> ...
随机推荐
- jetty使用教程(嵌入eclipse开发)
在eclipse下面建一个java project 建立目录结构如下: 二级目录: (备注jetty_test是工程的根目录,etc.lib.webRoot为其二级目录) 到jetty的官方网站(ht ...
- iOS-UIView category
UIView+Extension.h #import <UIKit/UIKit.h> @interface UIView (Extension) @property (nonatomic, ...
- 转:Java NIO系列教程(七) Socket Channel
Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服务器. ...
- Jquery 扩展获取RUL参数
//扩展获取url $.extend({ getUrlVars: function () { var vars = [], hash; var hashes = window.location.hre ...
- vs2012 智能提示消失解决办法
一般你可以重启vs就可以解决问题,最蛋疼的是你重启也没用.只能重置,再不行就重装vs,再不行你就重装系统......扯淡了... 重置Visual Studio可以解决此问题, 方法:开始->M ...
- Android内核开发:系统启动速度优化-Android OS启动优化(转)
Android系统的启动优化主要分为三大部分: (1) Bootloader优化 (2) Linux Kernel的剪裁与优化 (3) Android OS部分的剪裁与优化 本文重点关注Android ...
- 移动端学习系列1--meta标签
<!-- 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏 --><meta name="apple-mobile-web-app-capable" co ...
- ubuntu 14.04 安装mysql server初级教程
序,mysql数据库是开源的,被大多数企业所使用 目录 一.apt-get install 软件安装原理剖析二.安装mysql server三.配置和管理msyql 一.apt-get install ...
- oracle数据库备份与还原
一 关于expdp和impdp 使用EXPDP和IMPDP时应该注意的事项:EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用.EXPDP和IMPDP是服务端的工具程 ...
- c++字符串详解(转)
之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至是 ...