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. 放棋子|2012年蓝桥杯B组题解析第七题-fishers

    (13')放棋子 今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中 ...

  2. 【安装】Redis4.0.10在Linux环境搭建

    1.下载Redis后上传到指定目录 2.解压 tar -zxvf redis-4.0.10.tar.gz 3.进入加压后的目录并编译 cd redis-4.0.10 make 4.进入src目录安装 ...

  3. (转) The care and maintenance of your adviser

    The care and maintenance of your adviser Ever since the advent of graduate school, students have com ...

  4. 【团队】EasyKing的实现_1

    完成部分 三个功能类 英雄. 子弹. 瓦片地图. 一个设置类 地图 实现功能 瓦片地图 英雄移动 攻击 受到攻击 TODO 子弹攻击范围 地图.建筑物和英雄的碰撞箱 音效 英雄技能 建筑 双人联机 物 ...

  5. 【转载】大连商品交易所-新套利撮合算法FAQ

    原文网址:http://www.dce.com.cn/dalianshangpin/yw/fw/ywzy/jyywzy/498201/1500371/index.html   大连商品交易所 新套利撮 ...

  6. How to install Bekeley Extension Software Switch(BESS)?

    参考: Github BESS How to install Bekeley Extension Software Switch(BESS)? Introduction BESS is a modul ...

  7. js精度误差

    之前虽然有看到过 js 精度相关的文章.但也都没有“印象深刻” ,但是今天"有幸"遇到了. 做一个项目,进行页面调试的时候, 当数量增加到3时总价格变得好长好长 立马在控制台验证了 ...

  8. Codeforces Round #332 (Div. 2) D. Spongebob and Squares(枚举)

    http://codeforces.com/problemset/problem/599/D 题意:给出一个数x,问你有多少个n*m的网格中有x个正方形,输出n和m的值. 思路: 易得公式为:$\su ...

  9. 【UOJ】#273. 【清华集训2016】你的生命已如风中残烛

    题目链接:http://uoj.ac/problem/273 $${Ans=\frac{\prod _{i=1}^{m}i}{w-n+1}}$$ #include<iostream> #i ...

  10. Pandas中关于accessor的骚操作

    来自:Python那些事 pandas中accessor功能很强大,可以将它理解为一种属性接口,通过它获得额外的方法. 下面用代码和实例理解一下: import pandas as pd pd.Ser ...