zoukankan      html  css  js  c++  java
  • 两列布局的设置方法总结

    今天看到了这样一道题

    用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 

    自己感觉有好几种方法,再此总结下:

     一、使用position:absolute方法,因为把元素设置为absolute,那元素就脱离了文档流,后面的元素就会占据他原来的位置:

    <!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>
    </head>
    <style type="text/css">    
        .side{width:190px;height:80px;background-color:#F00;position:absolute;}
        .exta{height:80px;background-color:#0f0;margin-left:190px; }        
    </style>
    
    <body>
        <div class="pd">   
            <div class="side">side</div>
            <div class="exta">exta</div>
        </div>
    </body>
    </html>

     

    二、使用float方法

    <!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>
    </head>
    <style type="text/css">
        
       .side{width:190px;height:80px;background-color:#F00;
          float:left;
        }
        .exta{height:80px;background-color:#0f0; }//不能添加float:left;否则其宽度就会随内容变窄,不是随浏览器变化了
            
    </style>
    
    <body>
        <div class="pd">
            
            <div class="side">side</div>
            <div class="exta">exta</div>
        </div>
    </body>
    </html>

  • 相关阅读:
    Shell变量之自定义变量、环境变量
    Shell变量命名规则
    获取文件编码格式
    基于Lucene的文件检索Demo
    数据库压力测试工具
    插入ts以及判断列是否存在(支持多数据库)
    (摘)Chart属性设置
    (摘)C#comboBox绑定数据
    (摘)ORACLE DBA的职责
    (摘)DataGuard物理standby管理
  • 原文地址:https://www.cnblogs.com/happyLee/p/5087197.html
Copyright © 2011-2022 走看看