编辑并列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"> ...
随机推荐
- Java初学(二)
一.数据类型 在定义Long或者Float类型变量的时候,要加L或f(大小写无关,只是便于识别,建议不要小写L) 整数默认是int,浮点数默认是double 二.java字符 java语言采用的是Un ...
- 10.11 pod 安装
http://blog.csdn.net/youtk21ai/article/details/48896043
- CSS transition 过渡 详解
transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...
- Redis 数据库
Redis 服务器 Remote Dictionay Server Redis是一个key-value持久化产品,通常被称为数据结构服务器. Redis的key是string类型: ...
- SilverLight 条码 扫描枪 MVVM(转载)
目前做SL项目时,遇到条码的问题. 客户需要通过条码来加快工作效率以及减少错误.有条码,自然便引入扫描枪这个东西.不解释. 关键点是:扫描枪每次扫描完毕会触发回车 这是解决问题的关键! 现有两种情景: ...
- 利用sourcemap来调试sass
最近项目用上了sass,作为css的预处理器,它可以让我们用程序化的思维书写样式,极大的简化了css的开发,实在是前端居家旅行必备的利器. 我们都知道,在项目中,样式的频繁调试是不可避免的,用上sas ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- matlab 之字体调整
FontWeight {normal} | bold | light | demi
- java笔记--适配器模式的运用
适配器模式的运用 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3884785.html "谢谢-- 主要应用: 可以在符合 ...
- 输入的全角字符转换成半角字符--css、js、ASP.NET
我们经常需要用户在表单中输入数字,用户不小心使用了全角状态输入数字,但是在程序中全角的数字是不能直接转换为数字的.这种全角数字的错误处理起来就有些麻烦了.对一些没有经验用户来说明明已经输入数字了,怎么 ...