转自： http://www2.flash8.net/teach/6879.htm
在ie6里，带默认下滑条，用div布局效果。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sdf</title>
</head>
<script>
function $(uid){return document.getElementById(uid);}
function lod(){
var b_w=document.documentElement.clientWidth;
$('left').style.width=parseInt(b_w/2)+'px'
$('right').style.width=parseInt(b_w/2)+'px'
}
</script>
<body onload="lod();">
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
#left{float:left; background-color:#FF0000;}
#right{float:left; background-color:#0000FF;}
</style>
<div id="left"></div>
<div id="right"></div>
<p>在ie6里 带默认下滑条 用div布局效果</p>
</body>
</html>
去掉下滑条的情况下，使两列各占50%。缺点是，内容不能超长，适合软件布局使用。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;}
</style>
</head>
<body scroll="no">
<div class="left"></div>
<div class="right"></div>
</body>
</html>
在ie6中有下滑条的情况下布局，毛病在于左右两列的宽度不是绝对相等。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;}
</style>
</head>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
分享到：
相关推荐
媒体查询允许我们根据设备的视口宽度或其他特性来应用不同的样式，从而实现更灵活的布局适应性。 总的来说，设计适应不同分辨率的网页需要考虑多种因素，包括浏览器兼容性、内容的可扩展性以及用户可能使用的设备...
在网页制作中，`div`布局是一种至关重要的...通过下载提供的"div布局"文件，你可以进一步实践和研究这些概念，从而提升网页设计和开发的技能。记住，实践是最好的老师，不断尝试和改进，才能真正掌握`div`布局的精髓。
在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...
4. **适应窗口大小变化**：同时，插件还可能包含对窗口大小改变的响应，以适应不同分辨率的设备。 在提供的压缩包文件中，我们有多个示例文件： - `index.html`, `index2.html`, `index3.html`：这些是包含插件...
这种布局能够保证在不同分辨率的显示器上都有良好的显示效果，适应性强，适合于响应式设计。自适应布局的实现原理是使用百分比作为宽度和高度的值，这样布局的尺寸就会根据浏览器窗口的大小自动伸缩。例如，设置宽度...
- **布局设计**：项目采用了现代网页设计中最常见的`DIV+CSS`布局，这是基于块级元素构建的一种网页布局方式，它将网页的不同部分（如头部、主体内容、底部等）分割成独立的区块，每个区块使用`div`标签定义，再通过...
- **流体布局**：利用百分比单位进行宽度设置，使网页能够适应不同分辨率的设备。 - **响应式设计**：根据用户的行为和设备环境（系统平台、屏幕尺寸、屏幕方向等）自动调整布局、图片和脚本功能。 - **网格系统*...
【标题】：网站div布局 在网页设计领域，"div"布局是一种常用的技术，它基于HTML中的`<div>`元素，用于组织和控制网页内容的结构。`<div>`是“division”的缩写，意为分组或分区，是网页布局的基础构建块。通过CSS...
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
6. **固定宽度与百分比混合布局**：部分元素使用固定宽度，如logo或导航，其他部分使用百分比宽度，以适应不同分辨率。 7. **自适应布局**：利用媒体查询（media queries）根据屏幕尺寸改变布局结构。 8. **瀑布流...
不同分辨率的显示效果差异显著，小分辨率设备会呈现出大分辨率页面的缩放效果。为了避免这种问题，设计师通常会创建一个“安全宽度”，例如1200px，确保内容在所有设备上居中显示。这样，即使分辨率变化，内容仍能...
1. 流体布局：基于百分比的宽度设置，使网页元素能够根据浏览器窗口大小自动调整，以适应不同屏幕尺寸。 2. 固定布局：元素宽度以像素为单位，不随浏览器窗口变化而变化，适用于需要精确控制元素大小的情况。 3. ...
例如，你可以使用媒体查询（media queries）来实现响应式设计，让网页在不同分辨率下都能保持良好的用户体验。 总之，掌握Div+CSS布局的关键在于理解内容与样式的分离，以及如何用结构化的HTML和CSS选择器来实现...
1. **流式布局（Fluid Layout）**：页面元素宽度根据浏览器窗口大小自动调整，适应不同屏幕分辨率。这种布局多用于响应式设计，确保页面在不同设备上都能良好展示。 2. **固定布局（Fixed Layout）**：页面元素的...
《DIV+CSS布局大全》是IT领域中关于网页前端开发的重要教材，主要涵盖了使用HTML的DIV...通过学习《DIV+CSS布局大全》，开发者可以掌握构建高效、美观且适应性强的网页布局的关键技能，从而在网页设计领域更上一层楼。
使用div+css，我们可以轻松地定制这些部分的样式和位置，确保它们在不同分辨率的设备上都能保持一致性和易用性。 总的来说，ASP.NET页面布局结合div+css技术，提供了强大的工具来创建专业且用户友好的Web界面。通过...
- **流式布局**：通常使用百分比宽度来适应不同屏幕尺寸，元素沿水平方向从左到右排列。 - **网格布局**：通过创建行和列的网格系统，使内容在指定单元格中定位，适用于响应式设计。 - **Flexbox布局**：弹性盒...
通过这种方式，你可以为不同屏幕分辨率的用户提供优化的网页布局和视觉体验。这种方法对于今天的多设备访问环境尤其重要，因为它确保了无论用户使用何种设备，都能获得一致且高质量的浏览体验。
以上内容涵盖了`div + css`页面布局的基本概念和技术要点，通过熟练掌握这些知识，开发者可以构建出美观、灵活且适应各种设备的网页。在实际项目中，结合使用Flexbox和Grid布局，可以实现更为先进的网页设计效果。