div 宽度 自适应
------
解决方法：
* 显示在左侧的div使用 float="left"
* 显示在右侧的div使用 float="right"
*
* 宽度自适应的 div：
* 写在 3个div的最后面，比 float:right 的 div 还靠后，
* 不定义 width 属性，或者定义为 width:auto;
* 不定义 float 属性，或定义为 float:none;
*
*
------
例子：
<!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;
分享到：
相关推荐
在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
因此，如果希望div宽度自适应内容，我们需要改变div的默认行为。 一种常见的方法是将div的`display`属性设置为`inline-block`。这使得div具有内联元素的特性，即宽度会根据内容自动调整，同时保留块级元素的垂直堆...
实现DIV层自适应高度和宽度 在网页设计中，DIV层的自适应高度和宽度是非常重要的，因为它可以使网页适应不同的浏览器大小和分辨率，从而提高用户体验。以下是使用JS+CSS来实现DIV层自适应高度和宽度的知识点： 一...
本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....
在这个项目中，"tab选项卡内容宽度自适应"意味着设计者关注于使内容区域的宽度能够根据浏览器窗口大小或设备屏幕尺寸自动调整，以提供更好的用户体验。 实现这样的效果，主要涉及以下几个关键知识点： 1. HTML ...
在网页设计中，"div容器调整宽度大小自适应特效"是一项关键的技术，它涉及到前端开发中的响应式设计、布局管理...通过研究和理解这个示例，开发者可以掌握如何实现div宽度自适应的效果，进一步提升网页设计和开发技能。
本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...
本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽，以优化用户体验。这种自适应性是现代Web应用中必不可...
DIV三列布局，宽度自适应（且最小宽度500px）
如果div宽度小于图片宽度，就按照这个比例调整图片的高度，以保持原始比例。 值得注意的是，此方案适用于图片宽度大于div宽度的情况。如果图片高度大于div高度，可以调整条件判断，或者结合CSS的`object-fit`属性来...
`width: 100%`则是让图片宽度自动扩展以填充其父容器的宽度，从而实现自适应。 4. 浮动清除与盒模型 文档中包含清除浮动的代码（#clear），以及使用box-sizing属性定义盒模型的行为： ```css * { -webkit-box-...
有时，我们可能遇到这样的需求：希望外部的`<div>`容器保持固定的宽度，而不受内部`<div>`或其他子元素尺寸的影响。这在创建响应式设计、固定宽度的侧边栏或模块时尤为常见。本文将详细探讨如何通过CSS属性实现这一...
本主题聚焦于"div+css菜单导航布局自适应宽度"，这是一种确保导航栏在不同屏幕尺寸下都能良好展示的技术。这种技术在响应式网页设计中尤为重要，因为现代网站需要在手机、平板电脑和桌面电脑等不同设备上提供一致的...
宽度自适应的jQuery焦点图特效，图片的边缘与幻灯片区域的背景相融合，在这个思路上模拟实现了不同网页宽度的自适应问题。在使用本款焦点图特效要注意，每张图片的边缘处理要与DIV区域的背景相一致，否则就称不上是...
本文将详细讲解如何使用JavaScript实现一个自适应宽度的Tab标签导航。 首先，我们需要理解Tab导航的基本结构。通常，Tab导航由两部分组成：HTML结构和CSS样式。HTML部分用于定义各个Tab标签和内容区域，CSS则用于...
宽度自适应的网页图片展示-适合企业网站，自适应网页宽度或者是屏幕分辨率的变化，左右两边始终是填充满屏显示，仔细看会发现，将图片的背景与Div图片滚动区域相一致，就可快速实现这种效果，这种自适应的图片切换...
ReportViewer 的自适应大小问题是由于其高度和宽度固定的原因，而 DIV 的高度和宽度可以根据浏览器的尺寸进行调整。因此，我们可以使用 DIV 来包住 ReportViewer 控件，并使用 JavaScript 代码来调整 DIV 的尺寸，...
### div背景全屏自适应知识点解析 #### 一、知识点概述 在网页设计与开发过程中，经常需要将某个`div`元素的背景设置为全屏显示，并且能够根据不同的屏幕尺寸进行自适应调整。这种技术被称为“div背景全屏自适应”...