讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > css教程 >

正文

0

0

CSS三栏布局探讨——中间固定宽度两边自适应宽度

高洛峰

高洛峰

发布时间：2017-02-16 13:22:50

|

1393人浏览过

|

来源于php中文网

原创

下面和大家一起探讨和学习了一种用p+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用 今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用p+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一下这样的布局，特整理了一下代码，贴上来与大家一起分享和学习。

在讲这种布局之前，我还想和大家一起回想一下三列布局中的另一种，就是左右两列固定，中间自适应宽度。这种布局方法，网上问问Ｇ爸和度娘一定会有一大堆，但我还是要重复说说，方便自己今后查阅，记性太差，没办法。别的先不说了，就开始进入主题吧。对于两边固定中间一列自适应的布局方法，我最早使用的是绝对定位法。先看代码

代码如下:

立即学习“前端免费学习笔记（深入）”；

腾讯混元3D
腾讯混元3D

腾讯推出的一站式3D内容创作平台

下载 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"left"</span>></span>左边栏<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"right"</span>></span>右边栏<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"main"</span>></span>主内容<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span>


比如说，我左右两列都是220px，中间宽度自适应，那么我们使用绝对定位实现的方法是这样的

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="tag">html</span>,<span class="tag">body</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0</span>;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">padding</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0</span>;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">100</span>%;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#left</span>, 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">position</span>:<span class="value"> absolute;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">top</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0</span>;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">220</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">100</span>%;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#left</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">left</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0</span>;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">right</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0</span>;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#main</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">230</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">100</span>%;</span></span> 
<span class="rule">}</span></span>


这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。我个人现在不在建议使用这种布局。

第二种方法采用的是浮动布局

这种方法和上面的绝对定位方法很相似，只不过这里采用的是浮动，而不是绝对定位，先来看其html代码

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"left"</span>></span>left <span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"right"</span>></span>right<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"main"</span>></span>mian<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span>


这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面，如上面的html代码所示，下面我们一起来看看其css样式是怎么实现的

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="id" style="color:rgb(38,139,210)">#left</span>, 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">220</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">200</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> blue;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#right</span><span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> right;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#main</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">230</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> red;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">200</span>px;</span></span> 
<span class="rule">}</span></span>


是不是好简单一种方法呀，大家可以在本地机子上动手测试一下，效果如下所示：
CSS三栏布局探讨——中间固定宽度两边自适应宽度 

第三种方法：负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"main"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"mainContainer"</span>></span>main content<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"left"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"leftContainer"</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"inner"</span>></span>left content<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"right"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"rightContainer"</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"inner"</span>></span>right<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span>


从上面的Html代码中我们可以明显得看出，在main,left,right三个p内部我都增加了一个p，那么他们起了什么样的作用呢，大家从下在的CSS中可以明显的体会出来。 

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="id" style="color:rgb(38,139,210)">#main</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">100</span>%;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#mainContainer</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">230</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">200</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> green;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#left</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin-left</span>:<span class="value"> -<span class="number" style="color:rgb(42,161,152)">100</span>%;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">230</span>px 
}</span></span></span> 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin-left</span>:<span class="value"> -<span class="number" style="color:rgb(42,161,152)">230</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">230</span>px;</span></span> 
<span class="rule">}</span></span> 
<span class="id" style="color:rgb(38,139,210)">#left</span> <span class="class">.inner</span>, 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="class">.inner</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> orange;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">10</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">height</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">200</span>px;</span></span> 
<span class="rule">}</span></span>


简单的说一下其实现原理，这种方法布局，主要运用的是负的margin值。首先在p#main中我定了一个100％宽度并进行左浮动，并且主内容是放在其内层p#mainContainer中，并在这个主内容层中需要进行一个margin-left和margin-right设置，并且这两个值是很有讲究的，并不是可以随便设置的，这两个值需要等于左右两列的宽度。我们此处是230px。左栏和右栏都使用负的margin值加上左浮动来布局，左栏是左浮动并加了一个“margin-left:-100%”,这是因为p#left前面有一个p#main，并且其宽度为100％，这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边；而右栏也进行左浮动，但其定义的“margin-left”也是负值，并且等于其自身的宽度230px；最后在p#left,p#right中加上一个p.inner是为了更好的控制边栏与主内容列之间的间距。比如说此例的10px。大家可以看看其效果是不是和第二种方法一样。
CSS三栏布局探讨——中间固定宽度两边自适应宽度 
上面啰嗦完了常见的布局方法，接着进我们一起来看另外一种三列布局中间固定宽度，两边自适应宽度。对于我来说，这是一种很少碰到的布局方法，不知道大家有何体会，那么下面我们一起来看这种布局方法的实现过程，同样先来看html代码：

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"left"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"inner"</span>></span>this is left sidebar content<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"main"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"inner"</span>></span>this is main content<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">id</span>=<span class="value" style="color:rgb(42,161,152)">"right"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"inner"</span>></span>this is right siderbar content<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span>


这种方法也是借助于负的margin来实现的，首先我们在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，比如说此例中是"540px/2+1"也就是说他们都有一个"margin-left: -271px",这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层p.inner将其拉回来，就ＯＫ了，大家可以看下在的代码： 

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="id" style="color:rgb(38,139,210)">#left</span>, <span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> -<span class="number" style="color:rgb(42,161,152)">271</span>px;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">50</span>%;</span></span> <span class="rule">}</span></span> <span class="id" style="color:rgb(38,139,210)">#main</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">540</span>px;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> green;</span></span> <span class="rule">}</span></span> <span class="class">.inner</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">padding</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">20</span>px;</span></span> <span class="rule">}</span></span> <span class="id" style="color:rgb(38,139,210)">#left</span> <span class="class">.inner</span>, <span class="id" style="color:rgb(38,139,210)">#right</span> <span class="class">.inner</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">271</span>px;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">background</span>:<span class="value"> orange;</span></span> <span class="rule">}</span></span>

具体效果如下：
CSS三栏布局探讨——中间固定宽度两边自适应宽度 
这种方法如果在ie下会存在布局混乱的bug，你可以将p#right和p#left中的width值稍作修改： 

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="id" style="color:rgb(38,139,210)">#left</span>, 
<span class="id" style="color:rgb(38,139,210)">#right</span> <span class="rules">{ 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">float</span>:<span class="value"> left;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">margin</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> <span class="number" style="color:rgb(42,161,152)">0</span> -<span class="number" style="color:rgb(42,161,152)">271</span>px;</span></span> 
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">50</span>%;</span></span> 
<span class="rule">*<span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">49.9</span>%;</span></span> 
<span class="rule">}</span></span>


这样一来，在ie下也就安全了。

实现这种效果的方法可能有很多，希望大家有更好的方法能一起分享一起学习。

2012年09月26日更新——CSS3 Flexbox

前面介绍了三种方法，实现L1F2L3布局效果，也就是第一列和第三列自适应宽度，中间一列固定宽度。今天在给大家推荐一种CSS3实现这种布局的方法，采用CSS3的Flexbox，这种方法 不足之处就是只能在部分浏览器中使用，详细的请看下面代码：

HTML结构

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"grid"</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"col fluid"</span>></span> 
... 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"col fixed"</span>></span> 
... 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"><<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span> <span class="attribute" style="color:rgb(181,137,0)">class</span>=<span class="value" style="color:rgb(42,161,152)">"col fluid"</span>></span> 
... 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span> 
<span class="tag"></<span class="title" style="margin-left:60px; color:rgb(38,139,210)">p</span>></span>


CSS代码

代码如下:

立即学习“前端免费学习笔记（深入）”；

<span class="class">.grid</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">display</span>:<span class="value"> -webkit-flex;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">display</span>:<span class="value"> -moz-flex;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">display</span>:<span class="value"> -o-flex;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">display</span>:<span class="value"> -ms-flex;</span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">display</span>:<span class="value"> flex;</span></span> <span class="rule">}</span></span> <span class="class">.col</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">padding</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">30</span>px;</span></span> <span class="rule">}</span></span> <span class="class">.fluid</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">flex</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">1</span>;</span></span> <span class="rule">}</span></span> <span class="class">.fixed</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)">width</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">400</span>px;</span></span> <span class="rule">}</span></span>

效果如下面的demo所示：
CSS三栏布局探讨——中间固定宽度两边自适应宽度

更多CSS三栏布局探讨——中间固定宽度两边自适应宽度相关文章请关注PHP中文网！

相关文章

css如何使用Flexbox实现两栏布局_通过flex布局让页面结构简洁

css 浮动布局中中间列自适应怎么实现_通过宽度计算方式解释

css 想实现三栏固定宽布局怎么办_使用 css grid 定义三列固定宽度

css顶部固定底部自适应怎么布局_通过定义不同行高实现

css flexbox 如何实现左右固定中间自适应_利用不同 flex 值分配空间说明

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：用CSS3的box-reflect来制作倒影效果 下一篇：CSS Float布局过程与老生常谈的三栏布局

作者最新文章

实现一个 Java 版的 Redis

2018-05-30 13:56

Asp.net使用SignalR实现发送图片

2018-05-28 16:22

HTML5:使用Canvas实时处理Video

2018-05-28 17:58

最简单的微信小程序Demo

2018-05-30 10:20

Python构造自定义方法来美化字典结构输出

2018-05-29 10:33

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

2018-05-31 09:48

微信小程序：如何实现tabs选项卡效果示例

2018-05-29 15:01

微信小程序开发教程-App()和Page()函数概述

2018-05-28 16:19

python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

2018-05-29 15:23

详解python redis使用方法

2018-05-28 15:01

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发AI聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发AI大模型
通义千问
通义千问

阿里巴巴推出的全能AI助手

AI编程开发Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理Excel 表格
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发AI文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发AI文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI编程开发Agent智能体

相关专题

更多
Golang 实际项目案例：从需求到上线
Golang 实际项目案例：从需求到上线

《Golang 实际项目案例：从需求到上线》以真实业务场景为主线，完整覆盖需求分析、架构设计、模块拆分、编码实现、性能优化与部署上线全过程，强调工程规范与实践决策，帮助开发者打通从技术实现到系统交付的关键路径，提升独立完成 Go 项目的综合能力。

2

2026.02.26

Golang Web 开发路线：构建高效后端服务
Golang Web 开发路线：构建高效后端服务

《Golang Web 开发路线：构建高效后端服务》围绕 Go 在后端领域的工程实践，系统讲解 Web 框架选型、路由设计、中间件机制、数据库访问与接口规范，结合高并发与可维护性思维，逐步构建稳定、高性能、易扩展的后端服务体系，帮助开发者形成完整的 Go Web 架构能力。

3

2026.02.26

Golang 并发编程专题：掌握多核时代的核心技能
Golang 并发编程专题：掌握多核时代的核心技能

《Golang 并发编程专题：掌握多核时代的核心技能》系统讲解 Go 在并发领域的设计哲学与实践方法，深入剖析 goroutine、channel、调度模型与并发安全机制，结合真实场景与性能思维，帮助开发者构建高吞吐、低延迟、可扩展的并发程序，全面提升多核时代的工程能力。

5

2026.02.26

batoto漫画官网入口与网页版访问指南
batoto漫画官网入口与网页版访问指南

本专题系统整理batoto漫画官方网站最新可用入口，涵盖最新官网地址、网页版登录页面及防走失访问方式说明，帮助用户快速找到batoto漫画官方平台，稳定在线阅读各类漫画内容。

356

2026.02.25

Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法
Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法

本专题系统整理Steam官网最新可用入口，涵盖网页版登录地址、新用户注册流程、账号登录方法及官方游戏商店访问说明，帮助新手玩家快速进入Steam平台，完成注册登录并管理个人游戏库。

78

2026.02.25

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者，系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例，帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

35

2026.02.25

Python数据处理流水线与ETL工程实战
Python数据处理流水线与ETL工程实战

本专题聚焦 Python 在数据工程场景下的实际应用，系统讲解 ETL 流程设计、数据抽取与清洗、批处理与增量处理方案，以及数据质量校验与异常处理机制。通过构建完整的数据处理流水线案例，帮助开发者掌握数据工程中的性能优化思路与工程化规范，为后续数据分析与机器学习提供稳定可靠的数据基础。

14

2026.02.25

Java领域驱动设计（DDD）与复杂业务建模实战
Java领域驱动设计（DDD）与复杂业务建模实战

本专题围绕 Java 在复杂业务系统中的建模与架构设计展开，深入讲解领域驱动设计（DDD）的核心思想与落地实践。内容涵盖领域划分、聚合根设计、限界上下文、领域事件、贫血模型与充血模型对比，并结合实际业务案例，讲解如何在 Spring 体系中实现可演进的领域模型架构，帮助开发者应对复杂业务带来的系统演化挑战。

5

2026.02.25

Golang 生态工具与框架：扩展开发能力
Golang 生态工具与框架：扩展开发能力

《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路，涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式，帮助开发者构建高效、可维护的 Go 工程体系，并提升团队协作与交付效率。

19

2026.02.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程

最新文章

更多
CSS框架Patternfly应用_Red Hat出品的开源IT产品设计
CSS开发环境与生产环境的引入差异_SourceMap的配置
CSS响应式设计中的Retina屏处理_高清背景图的适配
CSS浮动布局中的居中问题_为什么margin:auto失效
css如何使用绝对定位实现布局_通过position absolute精确控制元素
css盒模型中的content区域如何理解_理解content区域与元素尺寸的关系
css如何处理弹性布局中的元素排列_利用flexbox调整元素的排列顺序
css 想让背景渐变动画循环播放怎么办_设置 background-color keyframes 循环动画
css响应式表格列宽错乱怎么办_使用百分比宽度和overflow解决
CSS过渡在表单验证中的应用_错误提示文字的弹出动画
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部