方法
一、浮動布局
[html]
view plain
copy
html
<divid=
"left"
>left sidebar
div>
<divid=
"content"
>main content
div>
css code
<style
type
="text/css"
>
* #left
#content
style>
[html]
view plain
copy
<span
style
="font-family: verdana, 'lucida grande', arial, helvetica, sans-serif; line-height: 18px;"
>上面這種實現方法最關鍵之處就是自適應寬度一欄「div#content」的「margin-left」值要等於固定寬度一欄的寬度值
span>
方法二、
[html]
view plain
copy
>
<html
lang
="en"
>
<head>
<meta
charset
="utf-8"
>
<title>document
title>
<style
type
="text/css"
>
* #left
#content
#contentinner
style>
head>
<body>
<divid=
"left"
>
left sidebar
div>
<divid=
"content"
>
<divid=
"contentinner"
>
main content
div>
div>
body>
html>
方法三……
詳情見：
左側固定 右側自適應
左側浮動，右側margin left值為左側寬即可。由於左側浮動，左側盒子脫標，右側仍在標準文件流，右側盒子寬度是剩下的寬度，效果為右側自適應。右側內容可居中，常規用法即可。需注意的是左側浮動，右側不能繼續浮動。如果兩邊盒子都浮動，由於右側盒子寬度不固定，預設為內容撐開寬度。若浮動，極有可能在第二排...
css布局之左側固定右側自適應布局
1.固定高度 左側固定 右側欄自適應寬度 title style type text css mainbody leftcol rightcol style head body divid mainbody divid leftcol div divid rightcol div div body ...
CSS 兩列布局 左側固定，右側自適應
前端乙個小面試題總結如下 1 方法一，高度100 左側float，右側自動寬度 會自動佔滿剩餘寬度 2 方法二，絕對定位absolute，使用方法一的html結構，左側絕對定位，拉出文件流，高度100 並設定一定寬度400px。右側自動寬度 將佔100 並設定margin left 400px。3 ...