布局那點事

Worktile 發布于2019-08-29 17:19 / 2788人閱讀

摘要：兩列左側固定寬度，右側自適應三列左右固定，中間自適應流式

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 排版布局拖動布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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