有时候我们会有这样的需求，如图，aside是导航或者某些链接，右边的main是显示重要的内容，左边需要定宽，右边的main能够自适应剩余的宽度：

　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Language" content="zh-CN" />

    <meta name="Keywords" content="" />

    <meta name="Description" content="" />

    <!-- <link rel="stylesheet" href="style/.css" type="text/css" /> -->

    <style type="text/css">

        *{margin:0; padding:0;}

        /* div{border:1px solid #CCC;} */

        .home{width:70%; min-width:270px;margin:0 auto;}

        .header{height:80px; width:100%; background:#CCC}

        .nav{height:50px; width:100%; background:#bbb}

        .content{}

        .content .aside{width:260px; height:400px; float:left; background:#999}

        .content .main{height:400px; margin-left:260px; overflow:hidden;zoom:1; background:#eee}

        .footer{height:80px; background:#888;}

    </style>

</head>

<body>

    <div class="home">

        <div class="header">

            header

        </div>

        <div class="nav">

            nav

        </div>

        <div class="content">

            <div class="aside">aside</div>

            <div class="main">main</div>

        </div>

        <div class="footer">

            footer

        </div>

    </div>

</body>

</html>

CSS 左边div固定，右边div自适应的更多相关文章

  1. HTML左边盒子固定,右边盒子自适应

    html: <div class="box1"> <div class="divA">DIVA</div> <div ...

  2. css-两个div并排，左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  3. flex 上下div固定, 中间div自适应

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  5. 【HTML+CSS】右侧固定，左侧自适应布局

    <style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ m ...

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

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

  7. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css实现左边div固定宽度，右边div自适应撑满剩下的宽度

    (1)使用float <div class="use-float"> <div></div> <div></div> & ...

  9. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

随机推荐

  1. db-mysql-001- 语句备份表

    1.备份表 CREATE TABLE AAbak( SELECT * FROM AA ); 2.两个已存在表导数据 INSERT INTO AAbak(c1,c2) SELECT c1,c2 FROM ...

  2. webuploader 多图片上传

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件. 具体接口参考 webuploader接口文档地址 一.图片上传功能 ...

  3. 剑指offer-java

    面试题67 机器人的运动范围 题意: 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. ...

  4. #if defined(__cplusplus)

    由于C++编译器需要支持函数的重载,会改变函数的名称,因此dll的导出函数通常是标准C定义的.这就使得C和C++的互相调用变得很常见.但是有时可能又会直接用C来调用,不想重新写代码,让标准C编写的dl ...

  5. LinQ高级查询、组合查询、IQueryable集合类型

    LinQ高级查询: 1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头 ...

  6. configparser模块来生成和修改配置文件

    1. 安装configparser模块 pip3 install configparser ##python2.7模块名为ConfigParser 2. 创建配置文件 import configpar ...

  7. jvm2

    垃圾回收器的实现: 1.让用户都暂停,不再产生垃圾,就去收集垃圾.新生代用复制算法清理垃圾,老生代用标记整理算法搜集垃圾. 优秀的算法:服务端默认是CMS收集器. %..jvm案例演示 内存: Jco ...

  8. C/C++结构体总结

    1  #include"iostream"  2  using  namespace  std;  3    4  struct  TestStruct  5  {  6      ...

  9. 【Thinking in Java, 4e】访问权限控制

    [包:库单元] 编译单元的概念. 一个.java文件就是一个编译单元,一个编译单元只能有一个public类,编译单元中的非public类一般是用于为public类提供支持的,这些类在包外不可见. im ...

  10. ThinkPHP5执行流程分析

    1.入口文件(tp5\public\index.php) 作用: 1)定义目录常量. 2)加载框架引导目录. 2.框架引导目录(tp5\thinkphp\start.php) 作用: 1)引导基础文件 ...