css實現兩欄自適應佈局

阿新 • • 發佈：2019-01-20

前端經典的兩欄佈局

示例程式碼：點此下載

1、左側定寬，左浮動；右側寬度100%;

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="left"></div>
		<div class="right">兩欄佈局；左側定寬左浮動，右側寬度100%</div>
	</body>
</html>

.left{
    float: left;
    width: 200px;
    height: 400px;
    background: red;
}
.right{
    width: 100%;
    height: 400px;
    background: green;
}

2、使用彈性佈局，父元素display: flex，左側定寬，右側flex:1，佔滿容器寬度

body{
    display: flex;
    flex-direction: row;
}
.left{
    width: 200px;
    height: 400px;
    background: red;
}
.right{
    flex: 1;
    height: 400px;
    background: green;
}

3、父元素相對定位，左側定寬，右側絕對定位。

body{
    position: relative;
}
.left{
    width: 200px;
    height: 400px;
    background: red;
}
.right{
    position: absolute;
    top: 0px;
    left:200px;
    right: 0px;
    height: 400px;
    background: green;
}

4、左側定寬，左浮動，右側overflow:auto

.left{
    float: left;
    width: 100px;
    height: 200px;
    background: red;
}
.right{
    height: 200px;
    background: green;
    overflow: auto;
}

5、html中左側元素放在右側元素後面，右側：父元素content寬度100%，右浮動，自己左邊距200px；左側：右浮動，右邊距-200px

!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" href="css/index5.css" />
</head>
<body>
	<div class="content">
		<div class="right"></div>
	</div>
	<div class="left"></div>
</body>
</html>

.content{
    float: right;
    width: 100%;
    height: 400px;
}
.right{
    height: 400px;
    background: red;
    margin-left: 200px;
}
.left{
    float: right;
    width:200px;
    height: 400px;
    background: green;
    margin-right: -200px;
}

css實現兩欄自適應佈局

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

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

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

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

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

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

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

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

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

css實現兩欄固定中間自適應

1、利用絕對定位和margin 此方法的原理說將左右兩側進行定位，讓其脫離文件流。中心區域自然流動到它們下面，再為其設定margin值此方法頁面元素結構可以順序可以隨意變動，注意top值需要進行處理，不然可能會出現對不齊現象 HTML <div id='container'>

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

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

兩欄自適應布局

mpat .com utf pat lock 汽車 border ctype pan <!DOCTYPE > <html> <head> <title></title> <meta name="na

文字環繞和兩欄自適應以及區域滾動插件iscroll.js

flow 一段舉例滾輪 scrollbar ike ima pan border 一、文字環繞效果：使用浮動 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一

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

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

【css】移動端自適應佈局與字型大小自適應

一、vw, vh vw它是根據可視區的寬度來計算的。 vh它是根據可視區的高度來計算的。 <body> <style> body { margin:0; } .te

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

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

[轉]css實現左側寬度自適應，右側固定寬度

原文地址:https://segmentfault.com/a/1190000008411418 頁面佈局中經常用會遇到左側寬度自適應，右側固定寬度，或者左側寬度固定，右側自適應。總之就是一邊固定寬度，一邊自適應寬度。一般固定寬度是導航欄，自適應寬度的是主體內容顯示區。所以要實現這種佈局，就先給出如

CSS實現全域性的自適應

還會出現滾動條，所以把溢位都設為hidden。方法二：html, body { padding: 0; margin: 0; height: 100%; overflow:hidden; } #map{ height: 100%; z-inde

Css之雙列自適應佈局

不論怎麼拖動瀏覽器，左側始終固定寬度<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&

CSS實現一側寬度自適應，一側為固定寬度

在百度前端技術學院遇到的問題，“頁面右側部分為固定寬度，左側保持與瀏覽器視窗變化同步自適應變化” 不少網站都是這樣的兩列式佈局，螢幕比較寬，如果全屏只有一列，看起來會比較累；兩列式佈局，可以讓內容一列

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

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

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

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>三欄佈局</title&

css之兩欄布局左側固定右側高度自適應

iscis pyo class cdh man db4 內容 tmx usb css兩欄布局之左側固定右側高度自適應先看這樣的html+css結構： .main { width: 900px; overflow:hidden; m

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

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

css實現兩欄自適應佈局

相關推薦