聊聊既熟悉又陌生的div+css布局

2015-6-27 Jon html+css

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。
例如：下面这种一列限定宽度，一列自适应。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>两列布局方法一-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .left,.right{padding:15px;}

      .content{padding-left:180px;}
      .left{
        float:left;
        width:150px;
        margin-left:-180px;
        background: #996600;
      }
      .right{
        background: #330000;
      }
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="content clearfix">
    <div class="left">
      摇晃的红酒杯
      嘴唇像染着鲜血
      那不寻常的美
      难赦免的罪
      谁忠心的跟随
      充其量当个侍卫
      脚下踩着玫瑰
      回敬一个吻当安慰
      可怜！！！
    </div>
    <div class="right">
      那催情的音乐
      听起来多么愚昧
      你无纵的防备
      伤你的是谁
      靠近我一点点
      是不一样的世界
      安睡在我的肩
      我用生命为你加冕
      夜太美
      尽管再危险
      总有人黑着眼眶熬着夜
      爱太美
      尽管再危险
      愿赔上了一切超支千年的泪
      痛太美
      尽管再卑微
      也享受粉身碎骨的滋味
      你太美
      尽管再无言
      我都想用石碑隔绝世界
      我的王妃
      我要霸占你的美
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

还有种方法和上面有异曲同工之处。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>两列布局方法二-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .left,.right{padding:15px;}

      .left{
        float:left;
        background: #996600;
        width:150px;
      }
      .right{
        background: #330000;
        margin-left:180px;
      }
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="wrap clearfix">
    <div class="left">
      摇晃的红酒杯
      嘴唇像染着鲜血
      那不寻常的美
      难赦免的罪
      谁忠心的跟随
      充其量当个侍卫
      脚下踩着玫瑰
      回敬一个吻当安慰
      可怜！！！
    </div>
    <div class="right">
      那催情的音乐
      听起来多么愚昧
      你无纵的防备
      伤你的是谁
      靠近我一点点
      是不一样的世界
      安睡在我的肩
      我用生命为你加冕
      夜太美
      尽管再危险
      总有人黑着眼眶熬着夜
      爱太美
      尽管再危险
      愿赔上了一切超支千年的泪
      痛太美
      尽管再卑微
      也享受粉身碎骨的滋味
      你太美
      尽管再无言
      我都想用石碑隔绝世界
      我的王妃
      我要霸占你的美
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

上面适用于简单的小模块布局，若是整个页面布局分左右两栏，一般处于对seo的考虑，需要优先加载右边主题内容，可以使用下面这种方法，屡试不爽，本博客就是这种布局

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>两列布局方法三-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .left,.right{padding:15px;}

      .right-outer{float:left;width:100%;}
      .right-outer .right{margin-left:230px;background: #330000;}
      .left{
        float:left;
        width:200px;
        background: #996600;
        margin-left:-100%; /* 这句是关键 */
      }
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="content clearfix">
    <div class="right-outer">
      <div class="right">
        那催情的音乐
        听起来多么愚昧
        你无纵的防备
        伤你的是谁
        靠近我一点点
        是不一样的世界
        安睡在我的肩
        我用生命为你加冕
        夜太美
        尽管再危险
        总有人黑着眼眶熬着夜
        爱太美
        尽管再危险
        愿赔上了一切超支千年的泪
        痛太美
        尽管再卑微
        也享受粉身碎骨的滋味
        你太美
        尽管再无言
        我都想用石碑隔绝世界
        我的王妃
        我要霸占你的美
      </div>
    </div>
    <div class="left">
      摇晃的红酒杯
      嘴唇像染着鲜血
      那不寻常的美
      难赦免的罪
      谁忠心的跟随
      充其量当个侍卫
      脚下踩着玫瑰
      回敬一个吻当安慰
      可怜！！！
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

上面都是使用浮动，下面来个绝对定位方法，但是这个要注意，给设置position:absolute的元素不要高度不要超过另外一个，不然会出现下面这种情况

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>绝对定位-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .content{position: relative;}
      .left,.right{padding:15px;}
      .left{
        position: absolute;
        width:200px;
        background: #996600;
      }
      .right{background: #330000;margin-left:230px;}
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="content">
    <div class="left">
      摇晃的红酒杯
      嘴唇像染着鲜血
      那不寻常的美
      难赦免的罪
      谁忠心的跟随
      充其量当个侍卫
      脚下踩着玫瑰
      回敬一个吻当安慰
      可怜！！！
    </div>
    <div class="right">
        那催情的音乐
        听起来多么愚昧
        你无纵的防备
        伤你的是谁
        靠近我一点点
        是不一样的世界
        安睡在我的肩
        我用生命为你加冕
        夜太美
        尽管再危险
        总有人黑着眼眶熬着夜
        爱太美
        尽管再危险
        愿赔上了一切超支千年的泪
        痛太美
        尽管再卑微
        也享受粉身碎骨的滋味
        你太美
        尽管再无言
        我都想用石碑隔绝世界
        我的王妃
        我要霸占你的美
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

对于上面会超出的例子，有很多页面就是要这样的需求，这也无可厚非，例如：博客园首页的左侧栏，如果非要绝对定位，又不想让其超出，也可以这样。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>绝对定位-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .content{position: relative;}
      .left,.right{padding:15px;}
      .left{
        position: absolute;
        top:0;
        bottom:0;
        width:200px;
        background: #996600;
      }
      .right{background: #330000;margin-left:230px;}
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="content">
    <div class="left">
      摇晃的红酒杯
      嘴唇像染着鲜血
      那不寻常的美
      难赦免的罪
      谁忠心的跟随
      充其量当个侍卫
      脚下踩着玫瑰
      回敬一个吻当安慰
      可怜！！！
    </div>
    <div class="right">
      那催情的音乐
      听起来多么愚昧
      你无纵的防备
      伤你的是谁
      靠近我一点点
      是不一样的世界
      安睡在我的肩
      我用生命为你加冕
      夜太美
      尽管再危险
      总有人黑着眼眶熬着夜
      爱太美
      尽管再危险<br>
      愿赔上了一切超支千年的泪<br>
      痛太美<br>
      尽管再卑微<br>
      也享受粉身碎骨的滋味<br>
      你太美<br>
      尽管再无言<br>
      我都想用石碑隔绝世界<br>
      我的王妃<br>
      我要霸占你的美
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

关于三列布局，左右两列定宽，中间一列自适应。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>三列布局方法-勿恨水长东</title>
    <style>
      .clearfix:before, .clearfix:after {display: table;content: " ";}
      .clearfix:after {clear: both;}
      .clearfix {*zoom: 1;}
      *{margin:0;padding:0;}
      body{color:#ccc;line-height: 35px;font-size: 16px;}
      .header h1,.footer{text-align: center;background: #ccc;color:#333;padding:20px 0;}
      .left,.right,.main-nr{padding:15px;}
      .main{
        float:left;
        width:100%;
      }
      .main-nr{
        background: #330000;
        margin: 0 190px;
      }
      .left,.right{
        width:160px;
        background: #996600;;
      }
      .left{
        float: left;
        margin-left: -100%;
      }
      .right{
        margin-left: -190px;
        float: left;
      }
    </style>
  </head>
  <body>
  <div class="header">
    <h1>这是头部</h1>
  </div>
  <div class="content clearfix">
    <div class="main">
      <div class="main-nr">
        我曾怀疑我　走在沙漠中<br>
        从不结果　无论种什么梦<br>
        才张开翅膀　风却便沉默<br>
        习惯伤痛能不能　算收获
        庆幸的是我　一直没回头
        终于发现　真的是有绿洲
        每把汗流了　生命变的厚重
        走出沮丧才看见　新宇宙
        海阔天空　在勇敢以后
        要拿执着　将命运的锁打破<br>
        冷漠的人
        谢谢你们曾经看轻我
        让我不低头　更精采的活
        凌晨的窗口　失眠整夜以后
        看着黎明　从云里抬起了头
        日落是沉潜　日出是成熟
        只要是光一定会　灿烂的
        海阔天空　狂风暴雨以后
      </div>
    </div>
    <div class="left">
      凌晨的窗口　失眠整夜以后<br>
      看着黎明　从云里抬起了头<br>
      日落是沉潜　日出是成熟<br>
      只要是光一定会　灿烂的<br>
      海阔天空　狂风暴雨以后<br>
    </div>
    <div class="right">
      转过头　对旧心酸一笑而过<br>
      最懂我的人<br>
      谢谢一路默默的陪着我<br>
      让我拥有好故事可以说<br>
      看未来　一步步来了<br>
    </div>
  </div>
  <div class="footer">
    这是底部版权
  </div>
  </body>
  </html>

您可以修改框中代码后运行查看

下面分享一道布局面试题目，只使用三个div，不使用定位，实现下面效果(点击运行代码查看)，亲可以试着做下后再看源码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>只使用3个div-勿恨水长东</title>
    <style>
      *{margin:0;padding:0;}
      body{color:#fff;line-height: 35px;font-size: 20px;text-indent: 5em; font-weight: bold;line-height: 30px}
      .div1,.div2{
        width:400px;
        height:200px;
        background: #666;
        float:left;
      }
      .div1{
        margin-bottom:20px;
      }
      .div2{
        clear:left; /* 这句代码是关键 */
      }
      .div3{
        width:600px;
        height:420px;
        background: #333;
        margin-left:420px;
      }
    </style>
  </head>
  <body>
    <div class="div1">第一个div <br> 先不要看源码，自己写写看</div>
    <div class="div2">第二个div <br> 先不要看源码，自己写写看</div>
    <div class="div3">第三个div <br> 先不要看源码，自己写写看
    <br>要求：
    <br>只能使用3个div
    <br>不能使用定位</div>
  </body>
  </html>

您可以修改框中代码后运行查看

以上代码亲测兼容主流浏览器和ie7以上（ie6未测），若有更好代码或问题欢迎交流讨论

标签: 布局

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇下着有些伤心的雨
上一篇我对 nodejs 的"鸡肋"情节

发表评论：

知向前端

聊聊既熟悉又陌生的div+css布局

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。
例如：下面这种一列限定宽度，一列自适应。

还有种方法和上面有异曲同工之处。

上面适用于简单的小模块布局，若是整个页面布局分左右两栏，一般处于对seo的考虑，需要优先加载右边主题内容，可以使用下面这种方法，屡试不爽，本博客就是这种布局

上面都是使用浮动，下面来个绝对定位方法，但是这个要注意，给设置position:absolute的元素不要高度不要超过另外一个，不然会出现下面这种情况

对于上面会超出的例子，有很多页面就是要这样的需求，这也无可厚非，例如：博客园首页的左侧栏，如果非要绝对定位，又不想让其超出，也可以这样。

关于三列布局，左右两列定宽，中间一列自适应。

下面分享一道布局面试题目，只使用三个div，不使用定位，实现下面效果(点击运行代码查看)，亲可以试着做下后再看源码。

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档

知向前端

聊聊既熟悉又陌生的div+css布局

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。 例如：下面这种一列限定宽度，一列自适应。

还有种方法和上面有异曲同工之处。

上面适用于简单的小模块布局，若是整个页面布局分左右两栏，一般处于对seo的考虑，需要优先加载右边主题内容，可以使用下面这种方法，屡试不爽，本博客就是这种布局

上面都是使用浮动，下面来个绝对定位方法，但是这个要注意，给设置position:absolute的元素不要高度不要超过另外一个，不然会出现下面这种情况

对于上面会超出的例子，有很多页面就是要这样的需求，这也无可厚非，例如：博客园首页的左侧栏 ，如果非要绝对定位，又不想让其超出，也可以这样。

关于三列布局，左右两列定宽，中间一列自适应。

下面分享一道布局面试题目，只使用三个div，不使用定位，实现下面效果(点击运行代码查看)，亲可以试着做下后再看源码。

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。
例如：下面这种一列限定宽度，一列自适应。

对于上面会超出的例子，有很多页面就是要这样的需求，这也无可厚非，例如：博客园首页的左侧栏，如果非要绝对定位，又不想让其超出，也可以这样。