zoukankan      html  css  js  c++  java
  • css实现两栏布局

    1、flex盒模型:左边固定宽度,右边自适应宽度

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <style>  
    .parent{
      height:500px;  
      border:1px solid #222;  
      display:flex;
      flex-flow:row;
    }  
    .stable{  
      200px;
      border:1px solid  #ccc;  
      margin:20px;  
    }  
    .change{  
      flex:1;
      border:1px solid #ff4400;  
      margin:20px;  
    }  
    </style>  
    </head>  
    <body>  
      <div class="parent">  
        <div class="stable">stable 固定宽度200px</div>  
        <div class="change">changeable 可变宽度</div>  
      </div>  
    </body>  
    </html>
    

    2、传统模式:左边div向左浮动,右边div使用margin-left把左边div的位置留出来

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .parent{
        height: 500px;
        border:1px solid #222;  
      }
      .stable{
        float: left;
        height: 460px;
         200px;
        border:1px solid  #ccc;  
        margin:20px;  
      }
      .change{
        height: 460px;
        border:1px solid #ff4400;  
        margin:20px 20px 20px 260px;  
      }
    </style>
    </head>
    <body>
      <div class="parent">
        <div class="stable">stable 固定宽度200px</div>
        <div class="change">changeable 可变宽度</div>
      </div>
    </body>
    </html>

     如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!

  • 相关阅读:
    图的广度优先搜索
    图的深度遍历
    图的邻接表的实现
    求1+2!+3!+...+20!的和。
    CSS用户界面样式
    CSS三角
    CSS字体图标技术
    CSS精灵技术
    CSS元素的显示和隐藏
    CSS定位
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11171729.html
Copyright © 2011-2022 走看看