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

原创 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>

如图:
这里写图片描述

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

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

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

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

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

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过. 辛苦几天的结果啊 平行共三行,中间行分两列,左边固定宽度,右边自适...
  • kyleing
  • kyleing
  • 2013年04月22日 14:36
  • 857

两列布局——左侧宽度固定,右侧宽度自适应的两种方法

今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满...
  • jiadluo
  • jiadluo
  • 2015年08月24日 15:35
  • 3693

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

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

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

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

两列布局——左侧宽度固定,右侧宽度自适应的两种方法

今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满...

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

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

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

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

css三列布局,中间div固定,两侧div宽度自适应

中间固定,两侧宽度自适应 1-3-1一列固定,中间div固定 *{ margin: 0; padding: 0; -moz-box-sizing: border-bo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两列固定,中间列宽度自适应
举报原因:
原因补充:

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