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. Direct-X学习笔记--纹理映射

    一.介绍 之前学习了如何绘制物体,还画了个DX自带的茶壶,然而这个东东并不怎么好看....离我们现实的物体简直相隔千里. 仅仅能说像美术他们用来写生的模型...那么要怎么样才干让我们的东西看起来更像真 ...

  2. [翻译]MySQL 文档: Control Flow Functions(控制流函数)

    本文翻译自13.4 Control Flow Functions Table 13.6 Flow Control Operators 名称 描述 CASE Case 运算符 IF() if/else ...

  3. 【Excle数据透视】二维数据如何创建数据透视表

    二维数据在创建数据透视表的时候,可能会给你带来一些麻烦,没法创建,会丢失维度,那怎么办呢? 解决办法:使用数据透视表和数据透视图向导即可创建 具体操作如下: 按下[Alt+D+P],出现如下界面 选择 ...

  4. Node.js学习笔记（6）——使用Express创建一个工程

    前提是搭建好了环境,node,npm,express:(推荐全局安装) 开始用express创建一个基础工程: express –t ejs microblog 进入文件夹之后 npm-install ...

  5. 设置jvm运行内存

    :1.右击项目—Bulid Path—Configure Build Path—Libraries,找到JRE System Libraary[Sun JDK 1.6.0_13],选中JRE Syst ...

  6. 对于一个字符串，请设计一个高效算法，找到第一次重复出现的字符。 给定一个字符串(不一定全为字母)A及它的长度n。请返回第一个重复出现的字符。保证字符串中有重复字符，字符串的长度小于等于500。

    // 第一种方法 // ConsoleApplication10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...

  7. HDFS源码分析数据块汇报之损坏数据块检测checkReplicaCorrupt()

    无论是第一次,还是之后的每次数据块汇报,名字名字节点都会对汇报上来的数据块进行检测,看看其是否为损坏的数据块.那么,损坏数据块是如何被检测的呢?本文,我们将研究下损坏数据块检测的checkReplic ...

  8. 【WPF学习笔记】之如何点登录按钮时判断用户名密码进行登录：动画系列之（二）

    ...... 承接动画系列之(一)的代码: 再添加登录按钮代码进行登录,验证用户名和密码在数据库是否正确. 直接上代码: using System; using System.Collections. ...

  9. Hive总结（四）hive安装记录

    本篇为安装篇较简单: 前提: 1: 安装了hadoop-1.0.4(1.0.3也能够)正常执行 2:安装了hbase-0.94.3, 正常执行 接下来,安装Hive,基于已经安装好的hadoop.过程 ...

  10. python 基础2.5 循环中continue与breake用法

    示例1: #循环退出,break continue.break 跳出最外层循环:continue跳出内层循环 #当 i=5时,通过continue 跳出当前if循环,不在执行if循环中后边的语句.i= ...