使用绝对定位实现三栏布局并居中显示:
<!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>css 禅意花园学习</title>
<style>
body{ text-align:center;}
#wrapper{ width:750px; margin:0 auto; text-align:left; position:relative;
}
#contentArea{ width:450px; position:absolute; top:0px; left:150px;}
#leftPanel{ width:150px; position:absolute;top:0px;left:0px;}
#rightPanel{ width:150px; position:absolute;top:0px; left:600px;}
#footer{display:none;}
</style>
</head>
<body>
<div id="wrapper">
<div id="contentArea">
<p>(headers and text here)</p>
</div>
<div id="leftPanel">
<p>(links and various text items here)</p>
</div>
<div id="rightPanel">
<p>(links and various text items here)</p>
</div>
<div id="footer">
<p>(Copyright statement,links,etc.)</p>
</div>
</div>
</body>
</html>
注意:由于IE5浏览器的缺陷导致其不能将外边距为auto的元素剧中显示，
所以我们需要使用两个text-align属性辅助IE5下的定位。
使用浮动实现三栏布局并居中显示:
<!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>css 禅意花园学习</title>
<style>
body{ text-align:center;}
#wrapper{ width:750px; margin:0 auto; text-align:left; position:relative;
}
#contentArea{ width:450px; float:left;}
#leftPanel{ width:150px; float:left;}
#rightPanel{ width:150px; float:left;}
#footer{ clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftPanel">
<p>(left)</p>
</div>
<div id="contentArea">
<p>(headers and text here)</p>
</div>
<div id="rightPanel">
<p>(right)</p>
</div>
<div id="footer">
<p>(Copyright statement,links,etc.)</p>
</div>
</div>
</body>
</html>
分享到：
相关推荐
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
### 用DIV+CSS实现国内经典式三行两列布局 #### 布局概述 在Web设计领域，有一种常见的布局方式被称为“三行两列”布局，这种布局广泛应用于企业站点和其他展示类网站中。典型的特征包括：顶部通常放置大型导航栏...
1. **灵活性**：CSS+DIV布局能实现各种复杂的网页结构，如两列、三列甚至多列布局，以及自适应屏幕尺寸的设计。 2. **可维护性**：将样式与内容分离，便于后期修改和优化，降低维护成本。 3. **易扩展性**：使用CSS+...
- **三栏布局**：多用于需要展示多个信息区域的页面。 - **响应式布局**：根据屏幕尺寸改变，元素会自动调整布局和样式，适应手机、平板和桌面电脑。 - **瀑布流布局**：常用于图片展示，元素沿垂直方向自适应排列，...
在传统的三栏布局中，通常有一个主内容区域居中，两侧分别有侧边栏。使用浮动布局可以实现这种效果，同时保持内容的可读性和布局的响应性。 描述中提到，CSS布局有两种主要方法：使用`position`属性和使用`float`...
在三栏布局中，如果希望创建居中的三栏，可以创建一个外层容器并设置`position: relative;`，然后分别对内部的三栏使用绝对定位，依据容器的相对位置进行布局。然而，绝对定位的一个缺点是，当元素高度不可预知时，...
例如，为了创建一个带有页头和页脚的三栏布局，可以先使用绝对定位将页面主体部分居中，并创建分栏，然后利用浮动来处理页头和页脚。页头通常不需要定位，页脚则可以使用清除浮动的方法来确保它始终位于页面底部。 ...
通过这种方式，我们可以创建一个响应式的三栏布局，其中中间栏根据文字内容动态调整宽度，同时保证了右侧栏的紧密连接。这种布局在网页设计中非常实用，尤其是在内容不确定或者需要高度自适应的场景下。同时，熟悉和...
**标题与描述**：本教程聚焦于网页设计中的关键环节——页面布局，并详细介绍了如何运用CSS和Div技术来构建网页的基本结构。 **重要性**：网页设计是网络开发的重要组成部分之一，良好的页面布局不仅能够提升用户...
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
1. 固定布局：常用于简单的两栏布局，左右栏宽度固定，中间内容自适应。 2. 浮动布局：通过浮动元素（float属性）实现多栏布局，但有浏览器兼容性和清除浮动的问题。 3. 定位布局（Positioning）：使用position属性...
- 使用浮动实现两栏布局 - 实现绝对定位的导航栏 - 利用Flexbox构建响应式网格系统 - 创建自适应图片和视频 - 高级技巧：动画、过渡和过渡效果 学习这个课件，你将掌握CSS+DIV网页设计的核心技能，能够创建出富有...
3. **三栏布局**：通常包含左侧导航、中间主要内容和右侧辅助信息，适合内容丰富的网站。 4. **响应式布局**：根据设备屏幕大小自动调整布局，确保在不同设备上都有良好的用户体验。这需要利用媒体查询（@media）来...
**描述**：该示例通过浮动和定位技术实现了左右两栏固定宽度，中间栏自适应的三栏布局。 **代码片段**： ```css #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
在网页设计中，`DIV+CSS`是一种常见的布局方式，它通过定义HTML中的`<div>`元素样式来实现页面的结构化布局。本篇将详细解释这些代码所代表的常见网页布局模式及其工作原理。 首先，单行一列布局是最基础的网页布局...
4. **三栏布局**：通过float、position或Flexbox/ Grid实现左中右三栏布局，满足不同场景需求。 5. **列高度自适应**：如Faux Columns技术，利用背景图片实现等高列布局，解决不同内容量时列高度不一致的问题。 四...
##### 4.4 三栏布局 - **方法一**：左右两侧固定宽度，中间自适应。 - 左右两侧：设置固定宽度。 - 中间部分：使用`margin: 0 auto`居中，并设置宽度为`100%`减去左右两侧的总宽度。 - **方法二**：利用Flexbox...
在网页设计中，CSS布局是构建页面结构的关键，尤其对于初学者来说，理解并掌握`div`配合CSS布局是至关重要的。本教程主要介绍`div`与CSS布局的基本概念，以及常用的布局方法。 首先，`div`元素是HTML中的一个块级...