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属性布局.前者适合布局首页,因为 ...
随机推荐
- FireMonkey 源码学习(1)
FireMonkey采用了与VCL不同的机制,很多基础类已经重新编写了,好在一如既往地提供了源代码,故此有机会学习一下. 一.图形引擎 FireMonkey采用了纯图形化技术解决可视化控件,而不是使用 ...
- Golang中使用kafka
golang中比较好用的kafka client有 sarama confluent-kafka-go go_kafka_client optiopay-kafka siesta 其中 sarama的 ...
- Restful framework【第五篇】解析器
基本使用 -解析器 -源码从request.data -全局配置 -'DEFAULT_PARSER_CLASSES':['rest_framework.parsers.JSONParser'], -局 ...
- Django框架(十) Django之模型进阶
QuerySet对象 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # (LIMI ...
- java 反射工具
<dependency> <groupId>org.reflections</groupId> <artifactId>reflections</ ...
- 取消开机logo,改成代码刷屏
将开机logo改成开始时代码刷屏,这样就能很方便看到开始时的一些问题 首先 sudo chmod 666 /etc/default/grub 然后将 GRUB_CMDLINE_LINUX_DEFAUL ...
- IDEA入门级使用教程----你怎么还在用eclipse?
http://blog.csdn.net/qq_31655965/article/details/52788374
- 【译】第37节---EF6-异步查询和保存
原文:http://www.entityframeworktutorial.net/entityframework6/async-query-and-save.aspx 你可以在.NET4.5下使用 ...
- _spellmod_leech_spell
comment 备注 spell 技能ID,玩家释放该技能时附带吸血效果 meetAura 产生吸血效果需要满足的光环ID,比如做一个空的光环,为寒冰箭吸血光环,则有些光环时候,寒冰箭会附带吸血效 ...
- 踩坑记录:spring boot的POST请求数据注入不了的问题
概述: 今天在使用spring boot框架的时候,踩了一个坑,是关于control层request body依赖注入的问题的,内容如下: 进过: 由于目前公司采用的系统架构,要求把springboo ...