<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中栏固定宽度,左右两栏宽度相等同时自适应宽度</title>
<STYLE type="text/css">
*{
margin:0;
padding:0;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
}
#header,#footer{
clear:both;
padding:10px;
text-align:center;
}
#left,
#right{
float:left;
width:50%;
margin:0 0 0 -151px;
}
#innerLeft,
#innerRight{
margin:0 0 0 151px;
background-color:#efefef;
}
#middle{
float:left;
width:300px;
background-color:#ccc;
}
.inner {
padding:12px;
}
</STYLE>
</head>
<body>
<DIV id="header">
<H1>固定中栏宽度, 左右两栏宽度相等和自适应</H1></DIV>
<DIV id="left">
<DIV id="innerLeft" class="inner">
<P><STRONG>表现:</STRONG>中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。</P></DIV></DIV>
<DIV id="middle">
<DIV id="innerMiddle" class="inner">
<P><STRONG>原理:</STRONG>利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行</P></DIV>
</DIV>
<DIV id="right">
<DIV id="innerRight" class="inner">
<P><STRONG>问题:</STRONG>IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。</P></DIV></DIV>
</body>
</html>
代码转载自：
http://www.zzsck.org/js/css/1185.html
分享到：
相关推荐
### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...
标题中的“7三列_左右固定_中间自适应布局”是指一种常见的网页设计模式，它旨在提供一个灵活且用户友好的界面。这种布局通常应用于网页设计中，以便在不同屏幕尺寸下保持良好的视觉效果和用户体验。 在网页设计中...
今天写一个供给大家参考学习，希望大家可以在这个基础上衍生一些其他的，比如三栏布局的那种：左右固定，中间自适应的效果等等 使用方法： 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
在Web开发中，CSS布局技术使得页面内容按照设计意图排列展示，其中实现两栏固定宽度而中间一栏自适应剩余空间的布局是非常常见的需求。本文章将通过介绍四种不同的CSS技术实现方法，为读者提供多种布局方案。 首先...
在网页设计中，"三栏布局"是一种常见的页面布局方式，尤其在构建复杂网页或需要展示多类信息时，这种布局能有效地组织内容。三栏布局通常包括左侧栏、中间主要内容区域和右侧栏，每栏宽度可以根据实际需求进行调整。...
在网页设计中，`div`布局是一种常见的网页结构组织方式，它通过`<div>`标签来划分页面的不同区域，便于实现复杂且灵活的页面布局。本主题主要关注使用`div`布局结合`Jquery`实现收起左栏以及全屏功能，这在现代网页...
"CSS三列布局两端固定宽度中间自适应"是一种常见的网页布局模式，它允许页面的两侧栏宽度固定，而中间主要内容区域则根据浏览器窗口大小自适应调整。这种布局方式能够很好地平衡内容展示和用户体验，尤其适用于内容...
本篇文章将深入探讨几种常见的布局方案，包括上中下一栏式、左右两栏式以及它们的不同实现方法，以及左中右三栏布局。 1. 上中下一栏式布局： 这种布局是最基础的网页布局之一，通常用于展示网站头部信息、主要内容...
本文将深入探讨实现三栏布局（高度固定，左中右结构，左右宽度300px，中间自适应）的五种方法。这些布局解决方案在不同的场景下各有优劣，对于前端开发者来说，理解和掌握它们能够提升代码的灵活性和适应性。 1. **...
在前端开发中，三栏布局通常指的是页面分为左侧、中间和右侧三个独立的区域，每个区域都有自己的内容展示。这种布局方式能够有效地组织信息，提高用户体验，同时也为设计师提供了足够的灵活性来调整各个部分的宽度和...
这个布局的特点是中间主栏宽度固定，两边侧栏则根据主栏的大小自适应伸展，同时兼容不同浏览器，包括IE和Firefox。下面将详细介绍这一布局方式以及涉及的关键技术点。 首先，CSS（层叠样式表）在构建这种布局中起着...
左中右三栏 左右固定 中间自适应布局 首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。 左右分别float left和float right, 中间栏使用margin撑开布局，即可完成布局 动态缩放浏览器窗口来查看效果 ...
- **方法一**：左右两侧固定宽度，中间自适应。 - 左右两侧：设置固定宽度。 - 中间部分：使用`margin: 0 auto`居中，并设置宽度为`100%`减去左右两侧的总宽度。 - **方法二**：利用Flexbox布局。 - 设置容器的`...
"CSS布局实例:上中下三行,中间自适应"这个标题所描述的是一个经典的三栏布局，其中上栏和下栏的高度是固定的，而中间栏则会根据浏览器窗口的高度动态调整，同时保持内容垂直居中。这种布局方式对于创建头部和底部有...
"圣杯布局"和"双飞翼布局"是两种常见的前端开发技术，主要用于实现三栏式布局，其中两边固定宽度，中间区域自适应。这两种布局模式都是为了在浏览器窗口大小变化时保持页面结构的稳定性和良好的用户体验。 **圣杯...
- **固定中栏宽度**：对于三栏布局，可以固定中间栏的宽度，而左右两侧栏自适应。这同样可以通过浮动、负外边距或现代CSS布局技术来实现。 - **最小高度100%，页脚保持在底部的布局**：为了确保页面在内容较少时...
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...