div 自适应宽度

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

<html>

<head>

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

<style type="text/css">

body {margin: 0 auto;text-align: center;}

#container {text-align: left;background-color: green;}

#top {height: 160px;background-color: red;}

#middle {height: 240px;background-color: yellow;}

#middle_left {height:240px;width: 200px;float: left;background-color: #333;}

#middle_right {height:240px;width: 220px;float: right;background-color: #ddd;}

/* 自适应宽度的 div：1.不要设置 width,即 width:auto ，2.不要设置 float,即 float:none，3.其div的位置应放在最后，比 float='right' 的 div 还靠后*/

#middle_center {height:240px;background-color: #aaa;}

#foot {height: 120px;background-color: teal;}

.clearDiv {clear:both;}

</style>

</head>

<body>

    <div id="container">

        <div id="top">top</div>

        <div class="clearDiv"></div>

        <div id="middle">

            <!-- 居左 -->

            <div id="middle_left">middle left</div>

            <!-- 居右 -->

            <div id="middle_right">middle right</div>

            <!-- 自适应宽度的 div 应放在最后 -->

            <div id="middle_center">middle center</div>

        </div>

        <div class="clearDiv"></div>

        <div id="foot">foot</div>

    </div>

</body>

</html>
ie6 下 float 元素的空隙 问题：
 
解决方案： 
float:left; 时 _margin-right:-3px;
float:right;时 _margin-left:-3px;
转自：http://kuchaguangjie.iteye.com/blog/752234

div 自适应宽度的更多相关文章

  1. div自适应宽度

    对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏 ...

  2. 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--

    一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...

  3. 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...

  4. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  5. div 内容宽度自适应、超出后换行

    div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...

  6. 纯CSS实现Div高度根据自适应宽度（百分百调整）

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

  7. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

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

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

  9. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

随机推荐

  1. uva-10047

    我们考虑一个特殊情况,一个独轮车是一个圆环,独轮车靠这个圆环运动,这个圆环上涂有五个不同的颜色,如下图每个颜色段的圆心角是72度,这个圆环在MxN个方格的棋盘上运动,独轮车从棋盘中一个格子的中心点开始 ...

  2. JAVA 整合 SSM （Spring + SpringMVC + MyBatis）

    < 一 > POM 配置文件 ( 如果出现 JAR 包 引入错误, 请自行下载 ) <project xmlns="http://maven.apache.org/POM/ ...

  3. VB 调用动态链接库

    作为一种简单易用的Windows开发环境,Visual Basic从一推出就受到了广大编程人员的欢迎.它使 程序员不必再直接面对纷繁复杂的Windows消息,而可以将精力主要集中在程序功能的实现上,大 ...

  4. ccttp图片处理过程

    1.python输出404的图片 #!/usr/bin/python # coding: utf-8 import psycopg2 import sys from datetime import * ...

  5. How to Pronounce OPPORTUNITY

    How to Pronounce OPPORTUNITY Share Tweet Share Take the opportunity to learn this word!  Learn how t ...

  6. CPU Meltdown和Spectre漏洞分析

    一.背景: 1月4日,国外爆出了整个一代处理器都存在的灾难性漏洞:Meltdown和Spectre. 几乎影响了全球20年内所有cpu处理器:这两个漏洞可以使攻击者通过利用并行运行进程的方式来破坏处理 ...

  7. 移去OleContainer的黑边框

    //禁止双击打开word编辑 olecontainer1.AutoActivate := aaManual; //禁止右键菜单 olecontainer1.AutoVerbMenu := False; ...

  8. bat 批量更改文件名的批处理文件

    bat 批量更改文件名的批处理文件 最近下了不少动画,不过文件名都太长,一般都是 [字幕组][名称][集数][语言][分辨率][编码].后缀 这样的格式 我喜欢简单的名字,比如 01.rmvb 之类, ...

  9. python的可变list和不可变tuple, dict和set

    list和tuple 在python中分为可变表和不可变表: 类型 名称 表示方法 可变 list [] 不可变 tuple () list list是可变表,list内部索引从0开始,正整数是正序的 ...

  10. Django1.8：403错误：CSRF verification failed. Request aborted.

    问题:Django 403错误:CSRF verification failed. Request aborted.     原因:需要加cookie验证 解决方法: 1.在view.py中增加 fr ...