简单三栏布局效果如下图：
实现代码如下：
<style type="text/css">
.border{border: 1px solid #ccc;}
div{margin:0 0 5px 0;}
#wrapper {width: 500; margin: auto;}
#header {width: auto; }
#twoColumn {width:100%;float: left; }
#nav{float: left; width: 150px; }
#content{width:auto;margin-left:157px;margin-right:177px;}
#promo{width:170px; float: left;margin-left:-172px;}
#footer{clear:both;}
</style>
<div id="wrapper">
<div id="header" class="border">
<div id="header_inner">
Header
</div>
</div>
<div id="threeColumn">
<div id="twoColumn">
<div id="nav" class="border">
<div id="nav_inner">
<h3>Left Nav</h3>
<ul>
</ul>
</div>
</div>
<div id="content" class="border">
<div id="content_inner">Content</div>
</div>
</div>
<div id="promo" class="border">
<div id="promo_inner">
<h3>Promo</h3>
<p>11</p>
</div>
</div>
</div>
<div id="footer" class="border">
<div id="footer_inner">
Footer
</div>
</div>
</div>
复杂三栏布局效果如下图：
实现代码如下：
<html>
<style type="text/css">
* {font-size: 14px;}
div.inner {border:1px solid #ccc; margin:5px;}
div#wrapper{width:600px;}
div#nav{float: left; width:200px;}
div#twoColumn{margin: 10px 0px 10px 200px;}
div#content{padding-right:200px;margin-bottom:5px;}
div#login{width:200px;float: right;margin-top:-5px;margin-bottom:5px;}
div#url{clear:both;margin-bottom:10px;}
</style>
<body>
<div id="wrapper">
<div id="header">
<div id="header_inner" class="inner">
<h3>Header</h3>
<ul>
<li>Header 1</li>
<li>Header 2</li>
</ul>
</div>
</div>
<div id="nav">
<div id="nav_inner" class="inner">
<h3>Nav</h3>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
</ul>
</div>
</div>
<div id="twoColumn">
<div id="login">
<div id="login_inner" class="inner right_clear">
<h3>Login</h3>
<ul>
<li>Login 1</li>
<li>Login 2</li>
</ul>
</div>
</div>
<div id="content" class="right_clear">
<div id="content_inner" class="inner right_clear">
<h3>Content</h3>
<ul>
<li>Content 1</li>
<li>Content 2</li>
</ul>
</div>
</div>
<div id="url">
<div id="url_inner" class="inner">
<h3>Url</h3>
<ul>
<li>Url 1</li>
<li>Url 2</li>
</ul>
</div>
</div>
<div id="hot">
<div id="hot_inner" class="inner">
<h3>Hot</h3>
<ul>
<li>Hot 1</li>
<li>Hot 2</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inner" class="inner">
<h3>Footer</h3>
<ul>
<li>Footer 1</li>
<li>Footer 2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 大小: 2.7 KB
- 大小: 5 KB
分享到：
相关推荐
desc: 最简单、最全面的CSS三栏布局CSS 三栏布局代码中 div 都没有设置高度，使用时请自行设置高度浮动+margin定位双飞翼布局圣杯布局。
三栏布局技巧，采用flex-grow-shrink等属性，超极简单好用。
【三栏布局自适应WordPress主题】是网页设计领域中一种常见的布局模式，它将网页内容分为左侧栏、中间主栏和右侧栏，为用户提供清晰、结构化的浏览体验。这种主题在WordPress平台上尤其受欢迎，因为WordPress提供了...
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
【前端案例08】三栏布局模板是一种常见的网页设计模式，尤其在构建复杂网页结构时极为有用。在前端开发中，三栏布局通常指的是页面分为左侧、中间和右侧三个独立的区域，每个区域都有自己的内容展示。这种布局方式...
### Div+CSS三栏布局详解 #### 一、布局概述 本文档主要介绍了一种经典的网页布局技术——三栏布局的实现方式，采用Div+CSS技术。三栏布局是网页设计中常见的一种布局形式，其特点是在网页中分为三个部分：左侧栏...
- 缺点 :操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整(不符合某些场景) - 优点 :兼容性非常好，补缺了flex布局兼容的问题 (5)网格布局 : - 新技术，CSS3下一代局部方案 2、如果去掉...
在前端开发中，三栏布局是一种常见的网页设计模式，它将页面分为三个主要部分：左侧栏、中间栏和右侧栏，常用于展示不同类别的内容或功能。本案例中的"前端案例09"是一个完整的三栏布局实现，包含了图片和设计元素，...
### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...
### 新浪微博新版三栏布局公测：功能与体验全面升级 #### 一、引言 随着社交媒体平台的不断进化与发展，用户体验成为了各大平台竞相追逐的核心目标之一。近日，新浪微博宣布其新版三栏布局正式进入公测阶段，旨在...
三栏布局，中间自适应宽度，三栏自适应高度的布局
响应式Web开发是一种现代网页设计方法，旨在...为了实践这些概念，你可以打开提供的“项目1-1三栏布局页面”文件，逐步跟随教程，创建并调整自己的三栏布局。不断练习和实验，你会逐渐掌握响应式Web开发的核心技能。
本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下： 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见 1. float布局 最简单的三栏布局就是利用float进行布局。首先来...
通过上述步骤，我们成功创建了一个三栏布局，其中中间栏固定，两边栏可折叠的响应式设计。这个布局可以在不同设备上提供一致的用户体验，并且可以通过JavaScript灵活控制。在实际应用中，可以根据具体需求进一步定制...
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为...
标题“CSS Float布局过程与老生常谈的三栏布局”强调了浮动在创建经典三栏布局中的应用。在传统的三栏布局中，通常有一个主内容区域居中，两侧分别有侧边栏。使用浮动布局可以实现这种效果，同时保持内容的可读性和...
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...