• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 前段面試題:寫一個左中右布局占滿屏幕,其中左右兩塊是固定寬度200 ,中間自適應寬。

    標簽: html  css  面試

    最近又看到這樣一道面試題:
    寫一個左中右布局占滿屏幕,其中左右兩塊是固定寬度200 ,中間自適應寬,要求先加載中間塊,請寫出結構及樣式:

    • 給出的答案:
     <body>  
            <h3>實現三列寬度自適應布局</h3>  
            <div id = "left">我是左邊</div>  
            <div id = "right">我是右邊</div>  
            <div id = "center">我是中間</div>  
    </body>  
    html,body{ margin: 0px;width: 100%; }  
    h3{height: 100px;margin:20px 0 0;}  
    #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
    #left{left:0px;}  
    #right{right: 0px;}  
    #center{margin:2px 210px ;background-color: #eee;height: 200px; }   
    
    • 運行的結果
      在這里插入圖片描述
      看了答案,覺得方法有點和自己的想法不太一樣,這里我來介紹我的兩種解決方案:

    效果圖
    在這里插入圖片描述

    方法一(利用浮動實現)

    注意
    利用浮動時需要將 center 盒子放在最后,通過overflow:hidden 清除浮動

        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html,
            body {
                height: 100%;
            }
    
            .left {
                width: 100px;
                background-color: rgb(199, 170, 223);
                float: left;
                height: 100%;
            }
    
            .center {
                background-color: rgb(151, 228, 148);
                overflow: hidden;
                height: 100%;
            }
    
            .right {
                width: 100px;
                background-color: rgb(199, 170, 223);
                float: right;
                height: 100%;
            }
        </style>
    
    
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </body>
    

    方法二(利用彈性盒實現)

        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html,
            body {
                height: 100%;
            }
    
            body {
                display: flex;
            }
    
            .left {
                width: 100px;
                background-color: rgb(199, 170, 223);
            }
    
            .center {
                background-color: rgb(151, 228, 148);
                flex: 1;
            }
    
            .right {
                width: 100px;
                background-color: rgb(199, 170, 223);
    
    
            }
        </style>
    
    <body>
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </body>
    
    版權聲明:本文為weixin_47180815原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/weixin_47180815/article/details/106603227

    智能推薦

    CSS篇-面試題3-實現一個三列布局-兩側兩列寬 100px-中間一列自適應

    雖互不曾謀面,但希望能和您成為筆尖下的朋友 以讀書,技術,生活為主,偶爾撒點雞湯 不作,不敷衍,意在真誠吐露,用心分享 點擊左上方,可關注本刊 標星公眾號(ID:itclanCoder) 如果不知道如何操作 點擊這里,標星不迷路 ━━━━━━ 兩列固定,中間自適應,或左邊固定,右邊自適應,都是屬于圣杯布局 具體實現效果如下所示 html 元素 css 代碼示例 上面主要利用的是彈性flex布局,父...

    神奇的Batch Normalization 如果一個模型僅訓練BN層會是什么樣的

    您可能會感到驚訝,但這是有效的。 ? 最近,我閱讀了arXiv平臺上的Jonathan Frankle,David J. Schwab和Ari S. Morcos撰寫的論文“Training BatchNorm and Only BatchNorm: On the Expressive Power of Random Features in CNNs”。 這個主意立刻引起了...

    用Python實現校園通知更新提醒

    前言 這個項目實已經在一個月前已經完成了,一直都想寫一篇博客來總結這個過程中遇到的一些問題。但最近一個月來都比較忙,所以一直拖到了現在。 首先說說起因吧,我沒事的時候,總喜歡依次點開學校主頁、教務處、圖書館以及學院的網站,看看有沒有什么新通知,雖然大多與我無關。恰逢最近正在學Python,經常聽到別人說用Python寫爬蟲很簡單,但自己尚未接觸過爬蟲。于是抱著試一試的心態看了幾篇關于Python爬...

    spring_ioc相關_第一章

    1 spring是一站式框架,在javaee的三層結構中,每一層都提供不提并的解決技術 web層:springMVC service層:spring的ioc dao層:spring的jdbcTemplate 2 javaee為避免兩個類之間出現耦合,則把對象的創建交給spring進行管理,spring的ioc操作:(1)ioc的配置文件方式;(2)ioc注解方式 3 ioc的底層原理使用技術(1)...

    【Python+OpenCV】視頻流局部區域像素值處理-一種特征提取方法

    參考我之前寫的處理圖片的文章:Python+OpenCV實現【圖片】局部區域像素值處理(改進版) 開發環境:Python3.6.0 + OpenCV3.2.0 任務目標:攝像頭采集圖像(例如:480*640),并對視頻流每一幀(灰度圖)特定矩形區域(480*30)像素值進行行求和,得到一個480*1的數組,用這480個數據繪制條形圖,即在逐幀采集視頻流并處理后“實時”顯示采...

    猜你喜歡

    JavaWeb——【前端】——注冊頁面

    頁面效果 實現代碼 注意事項 主要使用的bootstrap樣式 如果想引用,不要直接復制,沒用的。 先介紹下所引用的文件: boostrap的js、bootstrap的css、jquery的js、以及自己編寫的register.css。 因為博主用的thymeleaf語法,所以有th符號。 若要使用時,根據個人情況導入相應的依賴。...

    網站HTTP升級HTTPS完全配置手冊

    本文由葡萄城技術團隊于博客園原創并首發 轉載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 今天,所有使用Google Chrome穩定版的用戶迎來了v68正式版首個版本的發布,詳細版本號為v68.0.3440.75,上一個正式版v67.0.3396.99發布于6月13日,自Chrome 68起,當在加載非HTTPS站點時,都會在地址欄上明確標記為&ldqu...

    echarts 自定義儀表盤設置背景圖片

    echarts儀表盤 使用插件 vue-echarts 代碼示例 HTML部分 js部分 效果圖...

    RT-Thread Studio部分定時器時鐘不正確的解決方案

    在昨天的RT-Thread Studio硬件定時器hwtimer在stm32f411上的使用筆記中,遇到了部分定時器速度想象中和實際不一致的情況,具體表現在定時器2、3、4、5、9、10、11都正常,但定時器1要快一倍。 仔細查看代碼,找到了原因。 因為代碼使用的是工程是直接生成的時鐘代碼,實際的時鐘頻率是這樣的: 而實際的定時器時鐘配置代碼如下: 針對F411,去掉其中的宏定義是這樣的: 這里說...

    symfony學習筆記之模板渲染-----twig總結

    參考:https://blog.csdn.net/liebert/article/details/77414217 目錄 一、模板引擎工作原理 二、Twig模板引擎 1.運行環境要求 2.基本API用法 3.設計模板 (1)變量輸出         a.全局變量         b.設置變量 (2)...

    精品国产乱码久久久久久蜜桃不卡