圣杯布局中几个问题?求教-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

圣杯布局中几个问题?求教

2016-05-27 16:17:14 1923 1

学习圣杯布局中,参考这篇文章,大概布局实现了,但是还是有几点看不懂为什么要那样做,原文中也解释了,可是英文,额,菜。。
下面是我的布局代码,请教大家几个问题?

<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>圣杯布局测试</title>
<style type="text/css">
    body {
        min-width: 630px;
        margin: 0;
        padding: 0;
    }
    #container {
        padding-left: 200px;
        padding-right: 190px;
        overflow: hidden;        
    }
    #container .column {
        position: relative;
        float: left;
        text-align: justify;
        /*下面这两行代码的作用是把三栏底部对齐?可是为什么要这样写,哪里来的20010px? 我把他们换成10010样子也是一样的,但是原文中为什么设置为20010px?*/
        padding-bottom: 20010px;    
        margin-bottom: -20000px; 
    }
    #center {
        width: 100%;
        padding: 10px 20px;
        background-color: #DDDDDD;
    }
    #left {
        width: 180px;
        padding: 0 10px;
        right: 240px;
        margin-left: -100%;
        background-color: #6666FF;

    }
    #right {
        width: 130px;
        padding: 0 10px;
        margin-right: -190px;
        background-color: #FF6666;
    }
    #header, #footer {
        height: 80px;
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background-color: #999999;
    }
    #footer {
        position: relative;
        /*貌似不需要clear:both也可以。?*/
        clear: both;  
    }
    * html #footer-wrapper {   
        /*最不明白的是下面的代码,为什么要把footer再加一层div??
        还有下面的padding-bottom,margin-bottom我注释掉页面也没影响,这两段代码作用是什么?*/
        float: left;
        position: relative;
        width:100%;
        padding-bottom: 10010px;
        margin-bottom: -10000px;
        background-color: #fff;
    }
    /*IE6 fix*/
    * html #left {
        left: 150px;
    }
</style>
<body>


<div id="page">
  <div id="header"> This is the Header</div>
  <div id="container">
    <div id="center" class="column"> Main content </div>
    <div id="left"   class="column"> left sidebar  left sidebarleft sidebarleft sidebarleft sidebarleft left sidebar  left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar   left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar  left sidebarleft sidebarleft sidebarleft sidebarleftsidebar</div>
    <div id="right"  class="column"> right sidebar right sidebarright sidebarright sidebarright sidebarright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright  right sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightsidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarright </div>
  </div>
  <div id="footer-wrapper">
    <div id="footer"> This is the footer </div>
  </div>
</div>


</body>
</html>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:18:13
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>圣杯布局测试</title>
    <style type="text/css">
        body {
            min-width: 630px;
            margin: 0;
            padding: 0;
        }
        #container {
            padding-left: 200px;
            padding-right: 190px;
            overflow: hidden;        
        }
        #container .column {
            position: relative;
            float: left;
            text-align: justify;
            /*下面这两行代码的作用是把三栏底部对齐?可是为什么要这样写,哪里来的20010px? 我把他们换成10010样子也是一样的,但是原文中为什么设置为20010px?*/
            /* 1.这两行代码的作用是:让这三栏自动等高。原理可以查下“负边距”
               2.至于20010px你也说了改成10010px也可以,其实这个高度只要大于这三栏可能的最大高度就可以。设成20010是为了足够大,不用担心内容高度太大结果“变形”的问题
            */
            padding-bottom: 20010px;    
            margin-bottom: -20000px; 
        }
        #center {
            width: 100%;
            padding: 10px 20px;
            background-color: #DDDDDD;
        }
        #left {
            width: 180px;
            padding: 0 10px;
            right: 240px;
            margin-left: -100%;
            background-color: #6666FF;
    
        }
        #right {
            width: 130px;
            padding: 0 10px;
            margin-right: -190px;
            background-color: #FF6666;
        }
        #header, #footer {
            height: 80px;
            font-size: large;
            text-align: center;
            padding: 0.3em 0;
            background-color: #999999;
        }
        #footer {
            position: relative;
            /*貌似不需要clear:both也可以。?*/
            /* 确实不需要clear:both,因为#container里有这样一句话“ overflow:hidden ”,这句话让#container形成了BFC,BFC里面的浮动对外面不会产生影响。
             */
            clear: both;  
        }
        * html #footer-wrapper {  /* 去*才起作用,不过一般不都是直接 #footer-wrapper 么 */
            /*最不明白的是下面的代码,为什么要把footer再加一层div??
            还有下面的padding-bottom,margin-bottom我注释掉页面也没影响,这两段代码作用是什么?*/
            /* footer再加一层是因为一般的footer都不是一列而是几列布局,外面加个框把这些框起来,代码结构更清晰,同时也可能有其他作用。比如 padding-bottom: 10010px; margin-bottom: -10000px; 还是之前说的,为了让几列等高,但是这个栗子中,footer-wrapper里面只有footer一个元素,所以加不加没所谓。
            你说你注释这两行没影响,那是因为选择器不对。
             */
            float: left;
            position: relative;
            width:100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background-color: #fff;
        }
        /*IE6 fix*/
        * html #left {
            left: 150px;
        }
    </style>
    <body>
    
    
    
    
    <div id="page">
      <div id="header"> This is the Header</div>
      <div id="container">
        <div id="center" class="column"> Main content </div>
        <div id="left"   class="column"> left sidebar  left sidebarleft sidebarleft sidebarleft sidebarleft left sidebar  left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar   left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar  left sidebarleft sidebarleft sidebarleft sidebarleftsidebar</div>
        <div id="right"  class="column"> right sidebar right sidebarright sidebarright sidebarright sidebarright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright  right sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightsidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarright </div>
      </div>
      <div id="footer-wrapper">
        <div id="footer"> This is the footer </div>
      </div>
    </div>
    0 0
相关问答

1

回答

请教个问题 消费flink的cdc数据 如果有多张表 的数据 怎么做既能保证效率 又能比较优

2022-07-03 18:11:11 332浏览量 回答数 1

1

回答

python中thresh的拓展应用及注意事项是什么?

2021-11-30 00:19:07 120浏览量 回答数 1

1

回答

python中怎么创建响应式布局?

2021-11-07 12:53:38 122浏览量 回答数 1

1

回答

Ubuntu上的ASP.NET Core 2.2 Web应用程序-如何实施数据保护

2020-01-05 19:05:24 498浏览量 回答数 1

1

回答

Ubuntu上的ASP.NET Core 2.2 Web应用程序-如何实施数据保护

2020-01-05 19:04:24 676浏览量 回答数 1

1

回答

ubuntu nodejs环境

2017-06-01 09:43:46 1957浏览量 回答数 1

1

回答

Ubuntu下如何安装nodejs环境?

2017-05-18 17:08:49 2283浏览量 回答数 1

3

回答

ECS的ubuntu14中,sudo输入一直提示密码错误

2016-12-16 10:45:52 5064浏览量 回答数 3

1

回答

为什么我的通用代金券不能用,求教

2016-09-13 15:43:00 1916浏览量 回答数 1

3

回答

Mac上安装python失败,求解答

2016-07-19 10:37:14 5037浏览量 回答数 3
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载