<!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
分享到：
相关推荐
三栏布局“左右宽度固定，中间自适应宽度” 方法1、设置浮动，使文档脱离文档流，注意层的顺序 方法2、同样通过负边距来实现，缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
人工智能-项目实践-自适应学习-自适应学习模型-应用于教育领域-知识图谱 run this demo $python train_dkt.py --dataset ../data/assistments.txt
三栏布局，中间自适应宽度，三栏自适应高度的布局
三栏布局自适应wordpress主题是一款简洁白色风格的wordpress主题下载。。
百度前端开发练习总共有五题，中间自适应布局，自动补全，日历
Wordpress-EddBettr商业主题分享-HTML5开发-全屏自适应-带会员中心+商城 亲测；
一个三栏宽度自适应的实例。有两边栏宽度固定，中间宽度自适应和中间栏宽度固定，两边栏宽度自适应两种。
使用css实现的三列布局，中间一列宽度固定大小，两边宽度要自适应。
7三列_左右固定_中间自适应布局.rar
下面和大家一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用
空时自适应---STAP 程序完整 可以直接使用！
使用rem单位实现自适应布局，轻松掌握移动端开发。用法简单，比如普遍的设计图宽度为750px，那么在css中设置为7.5rem即可实现宽度100%
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” ...
计算方法实验3--自适应梯形求积公式.c 计算方法实验3--自适应梯形求积公式.c
信息论与编码课程设计---自适应算法
用经典的三栏形式布局举例： 固定 - 固定 - 自适应； 固定 -自适应 - 固定 ； 固定 -自适应 - 自适应； 自适应 - 自适应 - 固定； ....； ...
今天写一个供给大家参考学习，希望大家可以在这个基础上衍生一些其他的，比如三栏布局的那种：左右固定，中间自适应的效果等等 使用方法： 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
我们使用新浪微博的时候，在“微博精选”页面里可以看到大量的微博信息。该页面信息主要是以图片配文字说明，页面使用了自适应网格布局即砌墙效果，图片加载技术，以及滚动加载内容技术。本文先介绍砌墙效果。
NULL 博文链接：https://tangdonnaui.iteye.com/blog/357341
web前端开发例子，基于Bootstrap样式实现的html渐变顶部固定自适应导航栏，效果很不错！网上搜集，供参考学习。