css 三栏布局问题!,中间的那一栏不能达到自动分布的效果!!求指导!

发布网友 发布时间：2022-04-06 12:57

我来回答

共5个回答

懂视网 时间：2022-04-06 17:18

本篇文章给大家带来的内容是关于CSS三栏布局的实现方法总结（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

对于前端来说，布局也是必须掌握的，一个好的布局可以让页面看起来更美观。提到布局，那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题，算是基础题。所谓的三栏布局，一般是指左右两边固定中间自适应，或者是中间固定左右两边自适应。

左右两边固定中间自适应

圣杯布局

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）

style样式设置

1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
5、父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
6、左右盒子相对定位

<div class="container">
 <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
 <div class="left f"></div>
 <div class="right f"></div>
</div>
<style>
 body {
 min-width: 700px;
 }
 .container {
 height: 300px;
 padding: 0 200px 0 200px;
 }
 .f {
 float: left;
 }
 .main {
 width: 100%;
 height: 300px;
 background-color: cornflowerblue;
 }
 .left {
 width: 200px;
 height: 300px;
 background-color: indianred;
 margin-left: -100%;
 position: relative;
 left: -200px;
 }
 .right {
 width: 200px;
 height: 300px;
 background-color: lightgreen;
 margin-left: -200px;
 position: relative;
 right: -200px;
 }
</style>

该布局受内部元素影响而破坏布局的概率低，但是当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给body加一个最小宽度（起码大于左右两侧宽度之和）

双飞翼布局

与圣杯布局的思路是一致的，只是有一些细微的差别。

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）

style样式设置

1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4、中间main部分再加一个盒子inner，放置内容（与圣杯布局的不同点）
5、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
6、新添加盒子，inner，设置左右padding或margin

<div class="container">
 <div class="main f">
 <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
 </div>
 <div class="left f"></div>
 <div class="right f"></div>
</div>
<style>
 .container {
 height: 300px;
 }
 .f {
 float: left;
 }
 .main {
 width: 100%;
 height: 300px;
 background-color: cornflowerblue;
 }
 .left {
 width: 200px;
 height: 300px;
 background-color: indianred;
 margin-left: -100%;
 }
 .right {
 width: 200px;
 height: 300px;
 background-color: lightgreen;
 margin-left: -200px;
 }
 .inner {
 padding: 0 200px 0 200px;
 }
</style>

自身浮动

HTML结构设置

新建三个元素：left、right、main（注意，main写在后面）

style样式设置

1、左盒子左浮动，右盒子右浮动
2、中间部分设置margin或padding值

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
 .main {
 margin: 0 200px 0 200px;
 background-color: red;
 height: 200px;
 }
 .left {
 float: left;
 width: 200px;
 background-color: blue;
 height: 200px;
 }
 .right {
 float: right;
 width: 200px;
 background-color: pink;
 height: 200px;
 }
</style>

CSS3新特性：flex

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）

style样式设置

1、父元素设置宽度为100%，display: flex；
2、左右两则按产品需求设置宽高
3、中间部分设置flex: 1；

<div class="container">
 <div class="left"></div>
 <div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
 <div class="right"></div>
</div>
<style>
 .container {
 width: 100%;
 height: 200px;
 display: flex;
 }
 .main {
 flex: 1;
 background-color: red;
 height: 200px;
 }
 .left {
 width: 200px;
 background-color: blue;
 height: 200px;
 }
 .right {
 width: 200px;
 background-color: pink;
 height: 200px;
 }
</style>

还有其他的写法，这里就不一一赘述，只是列举了一些比较常用的，以及面试可能会问到的情况。CSS3还有很多好玩的特性，在工作和学习的过程中值得深入研究。

中间固定左右两边自适应

浮动 + 负边距 （圣杯布局）

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）

style样式设置

1、左右两边各占50%的宽度
2、左边负边距 margin-left 占中间p宽度的一半
3、右边负边距 margin-right 也占中间p宽度的一半

 <div class="container">
 <div class="left"></div>
 <div class="main">我是中间内容</div>
 <div class="right"></div>
 </div>
 <style>
 .main {
 width: 100px;
 text-align: center;
 float: left;
 background-color: lightgreen;
 height: 300px;
 }
 .left {
 height: 300px;
 float: left;
 width: 50%;
 margin-left: -50px;
 background-color: pink;
 }
 .right {
 height: 300px;
 float: right;
 width: 50%;
 margin-right: -50px;
 background-color: cornflowerblue;
 }
 </style>

CSS3新特性：flex

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right

style样式设置

1、父元素设置display: flex；flex-direction: row；
2、左右设置flex-grow: 1，平分剩余空间

 <div class="container">
 <div class="left"></div>
 <div class="main">我是中间内容</div>
 <div class="right"></div>
 </div>
 <style>
 .container {
 display: flex;
 flex-direction : row;
 }
 .main {
 width: 200px;
 height: 300px;
 text-align: center;
 background-color: lightgreen;
 }
 .left {
 height: 300px;
 flex-grow: 1;
 background-color: pink;
 }
 .right {
 height: 300px;
 flex-grow: 1;
 background-color: cornflowerblue;
 }
 </style>

CSS3特性 calc(四则运算)

用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 50px)。

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right

style样式设置

1、父元素设置100%宽；
2、左右设置width: calc(50%, - 中间宽/2)

 <div class="container">
 <div class="left"></div>
 <div class="main">我是中间内容</div>
 <div class="right"></div>
 </div>
 .container {
 width: 100%;
 height: 300px;
 }
 .f {
 float: left;
 }
 .main {
 width: 100px;
 text-align: center;
 background-color: lightgreen;
 height: 300px;
 }
 .left {
 height: 300px;
 background-color: pink;
 width: calc(50% - 50px); /*平分中间部分的宽度*/
 }
 .right {
 height: 300px;
 background-color: cornflowerblue;
 width: calc(50% - 50px); /*平分中间部分的宽度*/
 }

路漫漫其修远兮，没有别人聪慧，那就坚持不懈努，相信勤能补拙。每天进步一点点，总有一天会迈进一大步。

热心网友 时间：2022-04-06 14:26

以下代码解决你的两个问题。

三栏布局.html     文件代码如下：

<!doctype html>
<html lange="zh">
  <head>
    <meta charset="utf-8">
    <title>三栏布局</title>
    <link href="layout.css" rel="stylesheet">
  </head>

  <body>
    <div id="contain" >
      <div id="header">
        <p align="center">这是我的简历</p>
      </div>

      <div id="ceng" >
        <div id="cengleft"></div>
        <div id="cengmain"></div>
        <div id="cengright" ></div>
      </div>
    </div>
  </body>
</html>

layout.css     文件代码如下：（注意看注释部分，解决你的两个问题）

*{
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F9C;
margin: 0;
padding: 0;
height: 960px;
width: 100%;
}

#contain{ 
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #FFC;
}
#header
{
width:448px;
height:50px;
margin: 0 auto;
padding: 30px 50px 0px 50px;
background: #CCC;

}
#ceng
{
position: relative;      /*  关建行，用相对定位控制位置 */
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
padding: 0;
background: #C96;
height: 100%;           /*  关建行，取值auto的时候，如果overflow取visible                                     以外的值，所有 #ceng元素都不显示 ，所以，如
                            果overflow: hidden;则height: 100%; 或者给
                            height定一个高度值。*/
overflow: hidden;
}

#cengleft
{
position: absolute;     /*  关建行，用绝对定位控制位置 */
left: 0;                /*  关建行，用来固定左边位置起点 */
border:1px solid #66f;
width: 250px;
height: 250px;
background: #6cf;

}
#cengright
{
position: absolute;      /*  关建行，用绝对定位控制位置 */
right: 0;                /*  关建行，用来固定右边位置起点 */
border:1px solid #66f;
width:250px;
height: 250px;
background: #6cf;

}
#cengmain                    /*  你原来的选择器写错了（原来是 #cengmian） */
{
position: absolute;      /*  关建行，用绝对定位控制位置 */
left: 252px;             /*  关建行，用来固定左边位置起点 */
right: 252px;            /*  关建行，用来固定右边位置起点 */
border:1px solid #66f;
padding: 0 10px;
height: 100%;
background: #6cf;
}

热心网友 时间：2022-04-06 15:44

请自己百度搜索"1-3-1布局"，多得很。20多年前就被人解决了，并且当作一种模式推广开来了。

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 两边固定，中间扩展 </TITLE>
<style>
    #left{width:100px;float:left;}
    #centerWrap{margin-left:-100px;margin-right:-200px;float:left;width:100%}
    #center{margin-left:100px;margin-right:200px;}
    #right{width:200px;float:right;}
    #lc,#cc,#rc{border:1px solid red;height:300px}
</style>
</HEAD>

<BODY>
    <div id="containter">
        <div id="left">
            <div id="lc">left<br/>（100*300）</div>
        </div>
        <div id="centerWrap">
            <div id="center">
                <div id="cc">center</div>
            </div>
        </div>
        <div id="right">
            <div id="rc">right<br/>（200*300）</div>
        </div>
    </div>
</BODY>
</HTML>

你自己在各浏览器中，改变窗口大小看看效果。

热心网友 时间：2022-04-06 17:19

<style type="text/css">

div {margin:0;padding:0;}
.cengmain {float:left;width:100%;}
.cengleft {float:left;width:200px;margin-left:-100%;border:1px solid #333;background:#6cf;}
.cengright {float:left;width:198px;margin-left:-200px;border:1px solid #333;background:#6cf}
.cengmain .content {margin:0 200px 0 200px;background:#C96;}
</style>
<div class="ceng">
<div class="cengmain"><div class="content">中间内容区域</div></div>
<div class="cengleft">左边内容区域</div>
<div class="cengright">右边内容区域</div>
</div>

热心网友 时间：2022-04-06 19:10

对于问题2的div自适应宽度居中，你可以试一下margin:0,auto;追问没解决啊！！