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. JDK8 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    JDK8 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装时最好在 ...

  2. Jackson.jar的使用记录

    Jackson.jar的使用记录 之前一直使用json-lib.jar,近期发现网上说这个jackson.jar比較好 package com.spring.controller; import ja ...

  3. Node.js 抓取电影天堂新上电影节目单及ftp链接

    代码地址如下:http://www.demodashi.com/demo/12368.html 1 概述 本实例主要使用Node.js去抓取电影的节目单,方便大家使用下载. 2 node packag ...

  4. Oracle中Hint深入理解(原创)

    http://czmmiao.iteye.com/blog/1478465 Hint概述  基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担.但有时它也聪明反被聪明 ...

  5. 【转载】ORM的概念, ORM到底是什么

    一.ORM简介         对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使 ...

  6. jquery元素分组插件，用于把一连串元素分成多组，如把多个a标签分成多组放入<li>元素中，可以用于简化多图滚动为一个元素滚动，兼容ie6

    三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置 ...

  7. request 解决中文乱码问题

    package request; import java.io.IOException;import javax.servlet.ServletException;import javax.servl ...

  8. python coding style guide 的高速落地实践

    python coding style guide 的高速落地实践 机器和人各有所长,如coding style检查这样的可自己主动化的工作理应交给机器去完毕,故发此文帮助你在几分钟内实现coding ...

  9. android 用webView作为编辑器 各种问题

    1.首先我要说明一下为什么要写这个博客,因为公司最近需要一个自定义的编辑器,苦于没有思路在网上找了好久,看到了好多android实现的编辑器(其实也就那么几个并不多),公司需求和网页端同步共享创建的文 ...

  10. C#泛型<T>说明

    泛型:即通过参数化类型来实现在同一份代码上操作多种数据类型.泛型编程是一种编程范式,它利用“参数化类型”将类型抽象化,从而实现更为灵活的复用. C#泛型的作用概述 C#泛型赋予了代码更强的类型安全,更 ...