zoukankan      html  css  js  c++  java
  • css常见布局问题

    1.如何实现一个盒子在页面中上下左右居中

    方法一:(盒子宽高固定时)

    .box{
    400px;
    height:200px;
    background:#000;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-200px;
    }

    偏移量也可使用transform属性的translate来实现。

    方法二:

    .box{
    margin:auto;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0; 
    }

    2.左侧固定,如何使右侧自适应

    方法一:

    .block_left{float:left;300px;height:400px;background:#f00;}
    .block_right{margin-left:300px;height:400px;background:#000;}

    方法二:

    .block_left{float:left;300px;height:400px;background:#f00;}
    .block_right{overflow:hidden;height:400px;background:#000;}

    方法三:

    .block_left{position:absolute;300px;height:400px;background:#f00;}
    .block_right{margin-left:300px;height:400px;background:#000;}

    方法四:

    左右两部分同时固定定位,但是测试发现这样会出现横向滚动条,后续会继续补充。

    3.左右宽度固定,中间自适应

           方法一:

           .left{float:left;200px;height:100px;background:#f00;}

           .middle{margin-right:200px;margin-left:200px;height:100px;background:#ccc;}

           .right{200px;float:right;height:100px;background:#00f;}

    div布局为左右中

    方法二:

           .wrap{100%;margin:0 auto;display:flex;}
           .left{flex:0 0 200px;background:#ccc;}
           .middle{flex:1 1 auto;background:#333;}
           .right{flex:0 0 200px;background:#ccc;}

  • 相关阅读:
    java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数
    java数组回顾---线性查找最大值最小值---二分查找
    java万年历
    java基础易混点
    progressbar
    TabHost
    ExpandableListView
    AutoCompleteTextView
    GridView
    图像视图-ImageView
  • 原文地址:https://www.cnblogs.com/znyu/p/7306791.html
Copyright © 2011-2022 走看看