美文网首页
页面布局

页面布局

作者: 何大必 | 来源:发表于2018-11-05 21:36 被阅读0次
1、两列布局

左侧定宽,右侧自适应实现方法很多,我常用的float+margin+左侧设置width

//css
     .parent{
           height: 200px;border: 1px solid black;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background-color: yellow;
        }
        .right{
            margin-left: 210px;
            height: 100%;
            background-color: red;
        }
//html
<div class="parent">
        <div class="left"></div>
        <div class="right"></div>
</div>
image.png

也可以使用绝对定位实现。定位几乎可以实现所有布局,但个人感觉不够灵活~

2、三列布局

两边定宽,中间自适应,

  • 左右浮动+中间margin实现
//css
  .parent{
        height: 200px;border: 1px solid black;
    }
    .left{
        float: left;
        width: 200px;height: 100%;
        background-color: red;
    }
    .right{
        float: right;
        width: 200px;height: 100%;
        background-color: yellow;
    }
    .middle{
        height: 100% ;
        margin-left: 210px;margin-right: 210px;
        background-color: pink;
    }
//html
<div class="parent">
       <div class="left"></div>
       <div class="right"></div>
       <div class="middle"></div>
   </div> 
三列布局

当宽度小于left+right的宽度时,右侧会被挤掉下去,最好给页面一个min-width.

  • 也可以使用定位实现
//css
  .parent{
        position: relative;
        height: 200px;border: 1px solid black;
    }
    .left{
        position: absolute;left: 0;top: 0;
        width: 200px;height: 100%;background-color: red;
    }
    .middle{
        margin-left: 210px;margin-right: 210px;height: 100%;
        background-color: pink;
    }
    .right{
        position: absolute;right: 0;top: 0;
        width: 200px;height: 100%;background-color: yellow;
    }
//html
<div class="parent">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
</div> 

相关文章

  • CoordinatorLayout嵌套CoordinatorLa

    页面布局:一级页面布局: 二级页面布局(即在一级页面ViewPager中的Fragment下): 这样布局的目的是...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • Android自定义底部导航栏-Tabbar

    一、添加依赖 二、开始写布局 1、Tabbar布局页面 2、fragment_test.xml布局页面 这个页面就...

  • 左右条栏目 分层MVP RecyclerView

    页面的布局 主页面布局 左面的RecyclerView的布局 android:layout_width="matc...

  • Android----从相册选取图片

    导入包名 相册布局 相册条目布局 图片页面 图片条目布局 相册页面代码 图片页面代码 辅助类 MyImageSho...

  • 布局与定位

    布局 流体布局,扩展窗口时,页面中的内容随之扩展; 冻结布局,页面内容固定,不随页面的扩展而扩展;用一个 包含页面...

  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (

    本节主要讲解详情页的页面布局和css样式,以及从主页面到详情页面的跳转问题。 1. 详情页面的布局 页面布局的话,...

  • 店铺装修基础:如何设置页面布局

    *讲解页面布局 三种不同的页面布局 旺铺基础版 旺铺专业版 如何设置网店页面布局 总体流程:进入布局管理——添加布...

  • IM社交App02

    阅读原文 注册 登录 3.3 功能三:主页面 页面布局 主界面代码 3.4 功能四:设置页面 页面布局 退出登录 ...

  • webx笔记-页面布局

    1.页面布局 • Screen,代表页面的主体。• Layout,代表页面的布局。• Control,代表嵌在sc...

网友评论

      本文标题:页面布局

      本文链接:https://www.haomeiwen.com/subject/izdexqtx.html