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布局的更多相关文章

  1. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  2. 常见div+css网页布局(float,absolute)

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  3. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  6. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  7. line-block代替float布局;

    line-block代替float布局: 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果: 或则这样: 有时候,我们希望,以第一排最高的元素为换行基准时,我们就可以使用 ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

随机推荐

  1. dart基础语法

    .关于 runApp() 上面的实例代码中使用了 runApp() 方法,runApp 方法接收的指定参数类型为 Widget,即: runApp(Widget).在 Flutter 的组件树(wid ...

  2. SpringBoot 使用Mybatis-Plus

    简介 Mybatis-Plus(简称MP)是一个 Mybatis 的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 特性 无侵入:Mybatis-Plus 在 My ...

  3. Excel lastindex of a substring

    I think I get what you mean. Let's say for example you want the right-most \ in the following string ...

  4. oracle 之 连接查询

    where 连接 select * from a,b //使用的是笛卡尔乘积  显示 a.count*b.count 条数 select * from a,b where a.id=b.id 其实只是 ...

  5. 论文笔记之:Natural Language Object Retrieval

    论文笔记之:Natural Language Object Retrieval 2017-07-10  16:50:43   本文旨在通过给定的文本描述,在图像中去实现物体的定位和识别.大致流程图如下 ...

  6. Unity3D学习笔记(三十六):Shader着色器(3)- 光照

    光照模型:用数学的方法模拟现实世界中的光照效果.   场景中模型身上的光反射到相机中的光线: 1.漫反射:产生明暗效果 2.高光反射:产生镜面反射,物体中有最亮且比较耀眼的一部分 3.自发光: 4.环 ...

  7. 【Hadoop 分布式部署 三:基于Hadoop 2.x 伪分布式部署进行修改配置文件】

    1.规划好哪些服务运行在那个服务器上 需要配置的配置文件 2. 修改配置文件,设置服务运行机器节点 首先在   hadoop-senior  的这台主机上 进行   解压 hadoop2.5   按照 ...

  8. 【译】第19节---数据注解-NotMapped

    原文:http://www.entityframeworktutorial.net/code-first/notmapped-dataannotations-attribute-in-code-fir ...

  9. HDU 4303 Hourai Jeweled(树形DP)

    http://acm.hdu.edu.cn/showproblem.php?pid=4303 题意:给出一棵树,树上的每一个节点都有一个权值,每条边有一个颜色,如果一条路径上相邻边的颜色都是不同的,那 ...

  10. PHP 内置函数fgets读取文件

    php fgets()函数从文件指针中读取一行 语法: fgets(file,length) 参数 描述 file  必需.规定尧要读取的文件 length 可选 .规定尧都区的字节数.默认是102字 ...