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. 今日头条 CEO 张一鸣:面试了 2000 个年轻人,混得好的都有这 5 种特质

    https://blog.csdn.net/qq_35246620/article/details/72801285 博主说:多了解了解总是好的. 正文 张一鸣算是 80 后中绝对的佼佼者.1983 ...

  2. 【Spring Security】一、快速入手

    一 概要 Spring Security,这是一种基于 Spring AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权.这 ...

  3. LuoguP2161 [SHOI2009]会场预约

    题目地址 题目链接 题解 用fhqtreap对区间进行维护. 可以注意到的是,对于当前存在的预约,他们一定是升序排列的(有重叠的都被删了). 那么就可以用按照位置分裂的fhqtreap搞了(预约无论按 ...

  4. C#DataTable 使用GroupBy方法的lamda 表达式和Linq语句写法

    https://www.cnblogs.com/johnblogs/p/6006867.html DataTable ds = new DataTable(); //1.lamda 表达式写法(推荐) ...

  5. (转) AI突破性论文及代码实现汇总

    本文转自:https://zhuanlan.zhihu.com/p/25191377 AI突破性论文及代码实现汇总 极视角 · 2 天前 What Can AI Do For You? “The bu ...

  6. Netty 核心组件笔记

    Netty是一款高效的NIO框架和工具,基于JAVA NIO提供的API实现. 在JAVA NIO方面Selector给Reactor模式提供了基础,Netty结合Selector和Reactor模式 ...

  7. JavaScript(2)

    JavScript在页面上显示时间,首先我们先来了解关于时间的一些简单方法: getFullYear()  获取当前年份,getMonth() 0-n(一月到十二月),getDate() 1-31(月 ...

  8. [转载]grep查看上下文及简单正则表达式

    转载自:https://www.cnblogs.com/mfryf/p/3336288.html inux grep 显示前后几行的信息2016年03月02日 14:10:58 ChenHui246 ...

  9. 小文笔记 - phantomjs

    小文笔记 - phantomjs 视频推荐: http://www.intalesson.com/compedium/phantom 2017-05-13 第一节:安装 Windows安装: 下载解压 ...

  10. C#——LINQ语句

    委托: //delegate 返回值 委托名(参数); //委托不能在方法中定义 ////实例化委托,并赋值 //委托名 实例名 = new 委托名(函数名).lambda表达式; //使用委托实例, ...