HTML布局之左右结构，左边固定右边跟据父元素自适应，兼容IE6+、Firefox、Chrome、Opera、Safari，这里是用表单写的一个demo，其实就在主体布局中也是可以的，比如像后台一些管理系统左侧菜单，右侧内容。
​1. [文件] layout_float_bfc.html 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .item {
        overflow: hidden;
        zoom: 1;
        font-size: 12px;
        margin-bottom: 20px;
    }
    .item .item-title {
        float: left;
        width: 85px;
        font-size: 14px;
        font-weight: 400;
        text-align: right;
    }
    .item .item-con {
        overflow: hidden;
        zoom: 1;
    }
    em,i {
        font-style: normal;
    }
    p {
        margin: 0.3em 0;
    }
    .star {
        color: #F00;
        margin-right: 5px;
    }
    .tips-text {
        color: #ccc;
    }
    .input {
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0;
    }
    </style>
</head>
<body>
<ul>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">邮件地址</label><i>：</i>
        </div>http://www.huiyi8.com/qzone/​
        <div class="item-con">qq背景
            <input class="input" placeholder="建议用手机号码注册" type="text" />
            <p class="tips-text">6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
        </div>
    </li>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">密码</label><i>：</i>
        </div>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">6~16个字符，区分大小写</p>
        </div>
    </li>
    <li class="item">
        <div class="item-title">
            <em class="star">*</em><label for="">确认密码</label><i>：</i>
        </div>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">请再次填写密码</p>
        </div>
    </li>
</ul>
</body>
</html>
​

HTML布局之左右结构，左边固定右边跟据父元素自适应的更多相关文章

  1. css结构选择器组合使用，选择父元素中多个子元素中某一段元素

    nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6 ...

  2. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  3. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  4. css网页布局 --- 左边固定，右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  5. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  6. 再探display:table-cell &&左边固定、右边自适应

    display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明. 1. 父元素display:table-cell,并设置verticle-al ...

  7. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  8. table左边固定-底部横向滚动条

    是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...

  9. 你不知道的css各类布局（一）之固定布局、静态布局

    前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css ...

随机推荐

  1. PocketBeagle 初高级设置

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正.本文使用markdown标记语言写成,为获得最好的阅读体验,请访问我的博客原文. 1. PocketBeagle Summary ​ ...

  2. props default 数组（Array）／对象（Object）的默认值应当由一个工厂函数返回

    1.场景: Object: <!-- 步骤 --> <template> <div> <div class="m-cell"> &l ...

  3. Sqlserver 实际开发中表变量的用法

    在实际的开发中,我们可能遇到的问题是,在一个存储过程里面,我们可能要返回多段sql的结果集,但是最终怎么把多个结果集合成一块呢,那么这个时候临时表变量就来了 declare  @tmp table   ...

  4. webapi设置一个Action同时支持get和post请求

    代码如下: [AcceptVerbs("GET", "POST")] public HttpResponseMessage Http([FromUri]Prox ...

  5. iOS 从UITableViewController中分离数据源

    之前看objc.io #1 Light View Controllers看到一个非常不错的技巧:从UITableViewController中分离数据源,这样能够减小UITableViewContro ...

  6. An easy to use android color picker library

    https://github.com/xdtianyu/ColorPicker

  7. NGINX配置文件优化示例

    Nginx主配置文件 upstream.conf配置文件 # server nginx配置文件最好分开写,不要把所有的逻辑都放在一个文件里面,会看着很麻烦,,之前我的配置文件都放一起了,,导致现在维护 ...

  8. git分支处理

    查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创建+切换分支:git checkout -b ...

  9. ubuntu系统安装好后一些基本软件的安装

    preface: 由于某些原因重装了系统,原来在ubuntu下安装的一些软件又要又一次安装.稍微麻烦,整理下须要安装的步骤. #==================================== ...

  10. hdu4612 无向图中随意加入一条边后使桥的数量最少 / 无向图缩点+求树的直径

    题意如上,含有重边(重边的话,俩个点就能够构成了边双连通). 先缩点成树,在求数的直径,最远的连起来,剩下边(桥)的自然最少.这里学习了树的直径求法:第一次选随意起点U,进行bfs,到达最远的一个点v ...