Div不用float布局
CSS代码
.wrapper1_4 {
width: 100%; /* 也可以固定宽度 */
height: 26px;
}
.wrapper1_4 > .left {
display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */
width: calc(8%); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
width: -webkit-calc(8%);
width: -moz-calc(8%);
height: 100%;
text-align: center;
}
.wrapper1_4 > .right {
display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */
width: calc(28%); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
width: -webkit-calc(28%);
width: -moz-calc(28%);
height: 100%;
}
Html
<div class="wrapper1_4">
<div class="left">
lable1:
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
lable2:
</div>
<div class="right">
<input type="text" />
</div>
</div>
Div不用float布局的更多相关文章
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
- 常见div+css网页布局(float,absolute)
网页布局-常见 1, float布局 (1)常规方法 <div id="warp"> <div id="column&quo ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- line-block代替float布局;
line-block代替float布局: 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果: 或则这样: 有时候,我们希望,以第一排最高的元素为换行基准时,我们就可以使用 ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
随机推荐
- mysql的数据类型- 特别是表示日期/时间的数据类型: 参考: http://www.cnblogs.com/bukudekong/archive/2011/06/27/2091590.html
通常认为: 日期 就是 年-月-日: 时间就是: 小时:分钟:秒 要严格区分"日期"和 "时间"的 说法. 日期就是日期, 时间就是时间, 两者是不同的!! 日 ...
- Docker 命令收集
Docker 命令收集 1.删除所有容器 docker rm $(docker ps -a -q) 2.删除所有镜像 docker rmi $(docker images -q) 3.启动镜像 doc ...
- 最大公约数gcd与最小公倍数lcm
最大公约数:gcd 最大公倍数:lcm gcd和lcm的性质:(我觉得主要是第三点性质) 若gcd (
- 如何规避Adobe Flash Player中重橙网络的广告弹窗
具体解决之道,参见卡饭论坛风之咩的帖子:https://bbs.kafan.cn/thread-2123485-1-1.html
- java核心问题总结
Java 核心概念 equals 与 hashCode 的异同点在哪里?Java 的集合中又是如何使用它们的. Math.Integer.Double等这些封装类在使用equals()方法时,已经覆盖 ...
- PTA 7-1 整数分解为若干项之和(20 分)
7-1 整数分解为若干项之和(20 分) 将一个正整数N分解成几个正整数相加,可以有多种分解方法,例如7=6+1,7=5+2,7=5+1+1,….编程求出正整数N的所有整数分解式子. 输入格式: 每个 ...
- Jquery Validate 相关参数
Jquery Validate 相关参数 //定义中文消息 var cnmsg = { required: “必选字段”, remote: “请修正该字段”, email: “请输入正确格式的电子邮件 ...
- Python学习 day03打卡
今天学习的主要内容: ppython的基本数据类型: 1. python基本数据类型回顾 2.int---数字类型 4.str---字符串类型 一.python基本数据类型 1. int==>整 ...
- _pvp_gap_aura
该表可以用于控制区域内平衡,举个例子,当一个区域内超过limitHP的LM玩家个数为10,部落玩家个数为8,则阵营人数差为2,人数少的部落,所有部落玩家获得2层aura光环 zone 区域ID aur ...
- CentOS下修改Apache默认端口80
打开 /etc/httpd/conf/httpd.conf 文件 修改这个地方 #Listen 12.34.56.78:80 Listen 80 #把80改为你设置的端口,我设置端 ...