布局那点事

Worktile 发布于2019-08-29 17:19 / 2781人阅读

摘要：两列左侧固定宽度，右侧自适应三列左右固定，中间自适应流式

1.两列左侧固定宽度，右侧自适应


     
        left
     
     
        right

1.float+margin

  
.left {
   float:left;
   width:100px;
   height:100%;
}
.right {
   height:100%;
   margin-left:100px;
}

2.float+overflow

.left {
   float:left;
   width:100px;
   background:red;
}
.right {
   overflow:hidden;
   background:yellow;
}

3.flex

.parent{
   display: flex;       
}
.left{
   background: red;
   width: 100px;
}
.right{
   background: yellow;
   flex-grow: 1;
}

2.三列左右固定，中间自适应

1.流式

.left{
   float:left;
   background:red;
   width:100px;
   height:100px;
   } 
.right{
   float:right;
   background:black;
   width:100px;
   height:100px;
   }
.center{
   background: yellow;
   margin-left:100px;
   margin-right: 100px;
   height:100px;
   }

2.BFC

.center{
background: yellow;
height:100px;
overflow: hidden;
}

3.Flex

.container{
   width: 100%;
   height:100px;
   display: flex;
}
.left{
 background:red;
 width:100px;
}
.right{
  background:black;
  width:100px;
  order:2;
}
.center{
  background:yellow;
  flex-grow:1;
  order:1;
}

4.absolute

.container{
  width: 100%;
  position: relative;
}
.left{
   background:red;
   width:100px;
   height:100px;
   position:absolute;
   left:0;
   top:0;
}
.right{
    background:black;
    width:100px;
    height:100px;
    position:absolute;
    right:0;
    top:0;
}
.center{
    background:yellow;
    margin:0 100px;
    height:100px;
}

云服务器 GPU云服务器理那点 div布局布局html 排版布局拖动布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114251.html

移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

XboxYan 2019-08-02 15:32 评论0 收藏0
移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

Kerr1Gan 2019-08-23 18:41 评论0 收藏0
移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

Jackwoo 2019-08-30 11:24 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0