两列固定,中间列宽度自适应

原创 2015年11月20日 22:07:29

首先,我先举两个例子,一个是圣杯型布局,另外一个是双飞翼型。双飞翼型是某博主由圣杯型参考后自创的一个布局方式。

1. 圣杯型布局
尝试之路考虑以下DOM结构:

<div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div class="main"></div>        
              <div class="sub"></div>        
              <div class="extra"></div>    
         </div>   
      <div id="ft"></div></div>

利用浮动元素的负边距来定位:

.main {        
           float: left;       
           width: 100%;   
 }  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;    }   .extra {        
             float: left;        
             width: 190px;        
             margin-left: -190px;   
 }

通过简单的负边距,已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个自然的想法是,给main的容器#bd添加padding:

#bd {        
          padding: 0 230px 0 190px;   
 }

效果图
这里写图片描述
这样能让main定位到正确的位置,但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对,那就想办法调整到正确的位置。相对定位隆重登场:

.sub {        
           float: left;        
           width: 190px;        
           margin-left: -100%;        
           position: relative;        
           left: -190px;    }  
  .extra {        
             float: left;        
             width: 230px;        
             margin-left: -230px;        
             position: relative;        
             right: -230px;    }

如图:
这里写图片描述
3. 双飞翼布局
在淘宝UED内部的探讨中,给main增加了一层包裹:

<div id="main" class="column">
    <div id="main-content">#main</div>
</div>

里层main-content的作用就是将main定位到合适的位置,并方便设置padding等属性。想到此处,就像牛顿被苹果砸傻了一样,原来的main定位问题迎刃而解:

<div id="page"> 
                   <div id="bd">
                        <div class="main"></div>
                </div>
 </div>

CSS仅需增加一行:

.main-wrap { margin: 0 230px 0 190px;}

效果图:
这里写图片描述

3. 自创布局
在研究过上面的两个例子,我也写了一段代码。
content部分绝对定位,设置left:200px;right:230px;从而在两边空出两块来给sidebar和aside.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自创型</title> 
<style>
    *{margin:0;padding:0;}
    .main{
        overflow:hidden;
        position:relative;}
    .header,.footer{
        background:#696969;
        height:40px;
        text-align:center;}
    .content{
        position:absolute;
        background:#B22222;
        left:200px;
        right:230px;
        text-align:center;}
    .sidebar{
        float:left;
        width:200px;
        background:#FFB6C1;}
    .aside{
        float:right;
        width:230px;
        background:#F08080;}
</style>
</head>
<body>
    <div class="header">
        <p>header</p>
    </div>
    <div class="main">
        <div class="sidebar">sidebar</div>
        <div class="content">content</div>
        <div class="aside">aside</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

如图:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html 三列布局(两列固定宽度,一列自适应)

摘要:最近在做移动端页面布局,偶有心得,记录于此。

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...

实现左边宽度固定,右边宽度自适应的两列布局

最近面试被问到一个问题,感觉还挺经典,但由于脑子短路回答的不是很好。面试过后,在此简单总结一下这个问题的答案,如果下次遇到可以能回答的好一点。 问题就是:实现一个两列布局,要求左边宽度固定,右边宽...

css两列布局,一列固定宽度,另一列自适应宽度

两列之一固定,另一列自适应 1-2-1单列变宽布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; ...

html--三栏布局(两边固定宽度,中间自适应)

一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px;...

【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应

先附上效果图: 实现思路: 1、创建一个 div 容器(content)来存放这三个色块 2、设置容器 position:relative,两侧div position:abso...

CSS_Layout三分栏__左右两栏宽度固定,中间自适应

CSS: body{ min-width:800px; } h1, h2, div p{ margi...

淘宝双飞翼布局,左右固定中间自适应宽度。

1、淘宝双飞翼的优点: ①、重要的内容先加载; ②、兼容目前所有的主流浏览器,包括IE6。HTML结构: 自适应宽度自适应宽度自适应宽度自适应宽度自适应宽...

CSS三栏布局(两边固定中间自适应宽度)的方法

-   在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查...

CSS-两侧固定宽度,中间自适应的三列布局

在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)