五種實現左中右自適應佈局方法

阿新 • • 發佈：2018-12-14

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>五種實現左中右自適應佈局方法</title>
    </head>
    <style type="text/css">
        /* 方法一 浮動 */
        /* .parent {
            clear: both;
        }
        .left{
            float: left;
            width: 200px;
            background-color: #0000FF;
        }
        .right{
            float: right;
            width: 200px;
            background-color: aqua;
        }
        .center{
            padding: 0 200px; //margin  也行
            background-color: aquamarine;
        }  
*/
        /* 方法二 flex */
        /* .parent {
            display: flex;
        }
        .left{
            width: 200px;
            background-color: #0000FF;
        }
        .right{
            width: 200px;
            background-color: aqua;
        }
        .center{
            flex: 1;
            background-color: aquamarine;
        }  
*/
        /* 方法三 定位*/
        /* .parent{
            position: relative;
        }
        .left{
            position: absolute;
            top: 0;
            left: 0;
        width: 200px;
            background-color: #0000FF;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            background-color: aqua;
        }
        .center{
            padding: 0 200px;
            background-color: aquamarine;
        }  
*/
        /* 方法四 grid */
        /* .parent {
            display: grid;
            grid-template-columns: 200px auto 200px;
        }

        .left {
            background-color: #0000FF;
        }

        .right {
            background-color: aqua;
        }

        .center {
            background-color: aquamarine;
        } */
        /* 方法五 inline-block + calc */
        *{
            padding: 0;
            margin: 0;
        }
        .parent {
            clear: both;
            /* 幹掉間隙 */
            font-size: 0
        }

        .left {
            display: inline-block;
            width: 200px;
            font-size: 16px;
            background-color: #0000FF;
        }

        .right {
            display: inline-block;
            width: 200px;
            font-size: 16px;
            background-color: aqua;
        }

        .center {
            display: inline-block;
            width: calc(100% - 400px);
            font-size: 16px;
            background-color: aquamarine;
        }
    </style>
    <body>
        <!-- 方法一 -->
        <!-- <div class="parent">
            <div class="left">
                左
            </div>
            <div class="right">
                右
            </div>
            <div class="center">
                中
            </div>
        </div> -->
        <!-- 方法二 -->
        <!-- <div class="parent">
            <div class="left">
                左
            </div>            
            <div class="center">
                中
            </div>
            <div class="right">
                右
            </div>
        </div> -->
        <!-- 方法三 -->
        <!-- <div class="parent">
            <div class="left">
                左
            </div>            
            <div class="center">
                中
            </div>
            <div class="right">
                右
            </div>
        </div> -->
        <!-- 方法四 -->
        <!-- <div class="parent">
            <div class="left">
                左
            </div>
            <div class="center">
                中
            </div>
            <div class="right">
                右
            </div>
        </div> -->
        <!-- 方法五 -->
        <div class="parent">
            <div class="left">
                左
            </div>
            <div class="center">
                中
            </div>
            <div class="right">
                右
            </div>
        </div>
    </body>
</html>

五種實現左中右自適應佈局方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五種實現左中右自適應佈局方法</title> <

實現手機端自適應佈局的幾種方法

1.固定寬度頭部設定 <meta name="viewport" id="viewport" content="width=640,user-scalable=0, target-densitydpi=320"> ，意思為根據設計稿的

使用css實現三欄自適應佈局

現象：兩邊兩欄固定寬度，中間為自適應。思路： 1.絕對定位法：父元素相對定位，左右兩欄使用絕對定位,中間用margin相對父元素的邊距撐開。缺點：子元素使用絕對定位，父元素無法被撐開。會出現如下情況： 2.浮動法： H

CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。我這裡主要分為兩大類，一類是基於position傳統

css實現兩欄自適應佈局

前端經典的兩欄佈局示例程式碼：點此下載 1、左側定寬，左浮動；右側寬度100%; !DOCTYPE html> <html> <head> <meta

使用CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。我這裡主要分為兩大類，一類是基於position傳統的實現，一類是基於css3新

前端自適應佈局方法總結

點選上方藍色字型【學習web前端】可【快速關注】一欄固定一欄自適應實現程式碼：右兩欄固定，中間自

IT 移動端：足跡第三十五步：靜態、自適應、流式、響應式四種HTML網頁佈局的區別（哪種佈局在移動端最好用）

1）靜態佈局：在PC端與移動端用2個佈局；一個元素的位置和大小都不變化；2）自適應佈局：在PC端與移動端用2個佈局；一個元素的位置會變化。3）流式佈局：在PC端與移動端1個佈局；元素的位置會變化，元素的

[UWP]使用AdaptiveTrigger實現自適應佈局

原文: [UWP]使用AdaptiveTrigger實現自適應佈局這篇部落格將介紹如何在UWP開發中使用AdaptiveTrigger實現自適應佈局。場景1：窗體寬度大於800時，窗體背景色為綠色，窗體在0到800之間為藍色。 XAML Code: <Grid x:Name="La

qt顯示圖片並且實現自適應佈局

對話方塊開啟圖片 QString fileName = QFileDialog::getOpenFileName(this, tr("open iamge"),//對話方塊名稱 ".",//預設開啟檔案位置“.”檔案目錄"/"根目錄 tr("image files(*

小標題兩側加橫線或背景圖片自適應佈局實現技巧

<div class="tit-bar"> <div class="deg">滿意度調查</div> </div> .tit-bar .deg { width:100%; font-size: 16px; color: #555;

CSS3 calc函式+position+float實現左右兩欄固定，中間欄自適應佈局且中間欄優先載入

先上結果圖頁面縮小時程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

html5如何利用rem實現自適應佈局

先來簡單瞭解rem是什麼：rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。所以我們只要定義好螢幕中根元素的字型大小就可以了。定義好螢幕中根元素的字型大小，有兩種寫法： a

rem 是如何實現自適應佈局的

摘要：rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬高。本文講的是如何使用rem實現自適應。· rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對re

rem是如何實現自適應佈局的？

文章目錄來源：前端開發部落格摘要：rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬高。本文講的是如何使用rem實現自適應。· rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem

使用Flexible實現手淘H5頁面的終端適配rem自適應佈局-移動端自適應必備

曾幾何時為了相容IE低版本瀏覽器而頭痛，以為到Mobile時代可以跟這些麻煩說拜拜。可沒想到到了移動時代，為了處理各終端的適配而亂了手腳。對於混跡各社群的偶，時常發現大家拿手機淘寶的H5頁面做討論——手淘的H5頁面是如何實現多終端的適配？那麼趁此Amfe阿里無線前端團

rem是如何實現自適應佈局的

rem是什麼？ rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大

聖盃佈局------4種css左中右佈局方式

1. float+margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

關於利用css 實現右側固定左側自適應佈局的解決方案

最近遇到要求實現右側大小固定，左側自適應的問題，根據親身實現，現總結如下： 1.我們首先看一下左邊固定右邊自適應的情況 html ： <div id="left"> 我在左邊</div> <div id="ri

android自定義View（2）：實現百分比自適應佈局

android介面適配難是歷史原因，我們只能想辦法解決。github上面已有一些佈局自適應的解決方案，今天我分享的是自定義控制元件：RelativieLayout自適應百分比寬高。直接上菜。一，實現的效果圖眼見為實，截圖所示，寬高都是50％，實現了自

五種實現左中右自適應佈局方法

相關推薦