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

发布网友发布时间：2022-03-30 20:52

共4个回答

热心网友时间：2022-03-30 22:21

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

三栏布局.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-03-30 23:39

请自己百度搜索"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-03-31 01:14

热心网友时间：2022-03-31 03:05

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