2. 程式人生 > >html--左側固定寬度，右側自適應寬度佈局

html--左側固定寬度，右側自適應寬度佈局

阿新 • • 發佈：2019-02-02
左側固定寬度，右側自適應寬度結構

原理：

定位（position）中的absolute屬性值可以使元素脫離正常文件流，後面的元素向上移動，將後面的元素設定margin-left屬性值設定為前面脫離文件流的元素的寬度，就可以完全顯示後面的內容。

html程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>左側固定寬度，右側自適應頁面</title>
    <meta charset="utf-8">
    <style type="text/css">
 

        .container{
            height: 200px;
            background-color: #FFF;
        }
        .menu{
            margin: 0 auto;
            width: 1200px;
            height: 200px;
            background-color: gray;
        }
        .left{
            position: absolute;
            width: 200px;
            height
 
:200px;
            background-color: red;
        }
        .right{
            height: 200px;
            margin-left:200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="menu">
            <div class
 
="left">left</div>            
            <div class="right">right</div>
        </div>
    </div>

</body>
</html>

效果圖：
這裡寫圖片描述

相關推薦

html--左側固定寬度，右側自適應寬度佈局

左側固定寬度，右側自適應寬度結構 原理： 定位（position）中的absolute屬性值可以使元素脫離正常文件流，後面的元素向上移動，將後面的元素設定margin-left屬性值設定為前面

css實現兩欄佈局，左側固定寬，右側自適應的七種方法

一個面試會問的問題，如何實現兩個盒子，左側固定寬度，右側自適應。 下面是實現的其中方法： 1、利用 calc 計算寬度的方法 css程式碼如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&

常見前端佈局問題 （一）左側固定寬度，右側自適應

1，左邊固定寬度，右邊自適應 1-1,父元素display：table，子元素display：table-cell，設定固定寬度（常用） 1-2,固定寬度div左浮動，自適應div margin-left等於固定寬度 1-3,定位，固定寬度div絕對定位abso

兩欄佈局，左側固定寬度，右側自適應大小

html程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS佈局<

左側固定，右側自適應的佈局方式(新增評論區大佬教的方法）

一.浮動佈局 1.先讓固定寬度的div浮動！使其脫離文件流。 2.margin-left的值等於固定div的寬度相等。 .aside{ float: left; width: 200px; background-color: red; }

佈局 —— 左側固定，右側自適應

實現佈局：左側固定，右側自適應 一. flex佈局 html： <div class="content"> <div class="left"></div> <div class="right"></div> </d

CSS左側固定，右側自適應

DIV中左側若顯示，右側自適應到最大寬度。 左側不顯示時，右側自適應到100% <template> <div class="row"> <div class="card-left" v-show="isShow"> 左

CSS 兩列布局---左側固定，右側自適應

前端一個小面試題總結如下： 1、方法一，高度100%，左側float，右側自動寬度（會自動佔滿剩餘寬度）。 2、方法二，絕對定位absolute，使用方法一的HTML結構，左側絕對定位，拉出文件流，

css佈局之2邊固定寬度，中間自適應

左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。 <div class="left">1</div> <div class="right">2</div> <div class="center">3<

flex 左邊固定寬度，右邊自適應

name back attr ring att css span js xml -s <div id="flex"> <div id="left">我在邊，定寬</div> <div id="right">我在右邊，自適應

佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度為200px，中間自適應 浮動佈局詳解

需求：高度已知為200px，寫出三欄佈局，左欄和右欄各位200px，中間自適應，如下圖所示： 方法一：float浮動佈局 原理是：定義三個區塊，需要注意的是中間的區塊放在右邊區塊的下面，統一設定高度為200px，然後設定左邊欄寬度為200px並且float:left，設定右邊欄寬度為200px並且fl

css左側固定寬度右側自適應

left 多說 布局 形象 展示 說了 不同的 vertica imp 左側固定寬，右側自適應屏幕寬； 左右兩列，等高布局； 左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高） 要求不用JS或CSS行為實現； 仔細分析試題要求，要達到效

CSS實現左側固定寬度右側自適應的固比佈局

三種方案 1、 box1使用diaplay:table; display:table-cell; 配合calc 實現。 2、 box2使用dispaly:flex;flex:1實現。 3、 box

布局：左寬度固定，右邊自適應

con sidebar section 屏幕 type char red oat oct 需求： 左側固定寬，右側自適應屏幕寬； 左右兩列，等高布局； 左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高） 方法1：浮動布局 這種方法我

左側固定 右側自適應

orm 盒子寬度 sla 文檔 col form code con nbsp 左側浮動，右側margin-left值為左側寬即可。 由於左側浮動，左側盒子脫標，右側仍在標準文檔流，右側盒子寬度是剩下的寬度，效果為右側自適應。 右側內容可居中，常規用法即可。 需註意的是左側浮

佈局：左寬度固定，右邊自適應

需求： 左側固定寬，右側自適應螢幕寬； 左右兩列，等高佈局； 左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）   方法一：浮動佈局 這種方法我採用的是左邊浮動，右邊加上一個margin-left值，讓他實現左邊固定，右邊自適應的佈局效果 這種實

【CSS】右邊寬度固定，左邊自適應

右邊寬度固定，左邊自適應 第一種： <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .righ

css常用左側固定右側自適應佈局兩欄佈局的方法

話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

css常用左側固定右側自適應布局兩欄布局的方法

500px ack relative doc -a pre itl osi meta 話不多說直接上代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

--------------------------三欄佈局之左右寬度固定，中間自適應--------------------------

常見的頁面佈局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應， 下邊是我看過網上的視訊後寫出來的三欄佈局-左右寬高固定，中間自適應； 1 <!DOCTYPE html><!-- html 5 --