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. mongodb管理副本集(持续更新中)

         许多维护工作不能在备份节点上完成 因为要写操作,也不能在主节点上进行,这就需要单机模式启动服务器, 是指重启成员服务器,让他成为一个单机运行的服务器,而不再是副本集中的一员(临时的) 在单机 ...

  2. 撸代码--linux进程通信（基于共享内存）

    1.实现亲缘关系进程的通信,父写子读 思路分析:1)首先我们须要创建一个共享内存. 2)父子进程的创建要用到fork函数.fork函数创建后,两个进程分别独立的执行. 3)父进程完毕写的内容.同一时候 ...

  3. 工作总结 a标签 <a href="/meetingtheme">Back to List</a> 返回上一级 指向 控制器 默认Index @Html.ActionLink("Edit59", "Edit", new { id = item.ID }) 默认当前控制器

    @Html.ActionLink("Back to List", "Index")  ----  <a href="/doctorinfo&qu ...

  4. 深入理解Java 8 Lambda

    - 转载:blog1, blog2 以上两篇博客是对lambda表达式的深入理解,用于后续加深理解. 如下先从零开始理解lambda, 1. 接触lambda表达式是从python,javascrip ...

  5. 11 linux nginx上安装ecshop 案例

    一: nginx上安装ecshop 案例 (1)解压到 nginx/html下 浏览器访问:127.0.0.1/ecshop/index.php 出现错误:not funod file 原因:ngin ...

  6. 目标检测之行人检测（Pedestrian Detection）---行人检测之简介0

    一.论文 综述类的文章 [1]P.Dollar, C. Wojek,B. Schiele, et al. Pedestrian detection: an evaluation of the stat ...

  7. OpenStack 使用Ceph 配置指导

    概述 Ceph 作为分布式文件系统,不但具有高可靠性.高扩展性.高性能. 也是统一存储系统.支持对象存储.块存储.文件存储,本文介绍怎样使用Ceph 块存储作为OpenStack的Glance.Nov ...

  8. 访问一个绝对地址把一个整型数强制转换 （typecast）为一个指针是合法的

    在某工程中,要求设置一绝对地址为0x67a9的整型变量的值为0xaa66.编译器是一个纯粹的ANSI编译器.写代码去完成这一任务. 解析:这一问题测试你是否知道为了访问一个绝对地址把一个整型数强制转换 ...

  9. EntityFramework走马观花之CRUD（中）

    如果是独立的实体对象,在底层数据库中它对应一张独立的表,那么,对它进行新建.删除和修改没有任何难度,实在不值浪费笔墨在它上头. 在现实项目中,完全独立的对象少之又少,绝大多数情况都是对象之间有着紧密的 ...

  10. python 基础 1.5 python数据类型（四）--字典常用方法示例

    一. 字典 #字典 dict1 = {'name':'lzc','age':'20','sex':'man'} print dict1 print type(dict1) >>> { ...