css整体布局-CSDN博客

本文链接：https://blog.csdn.net/wangzhexiongfen/article/details/84717494

左宽固定，右宽自适应一：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽自适应</title>

* {

margin: 0px;

padding: 0px;

}

.left {

width: 220px;

float: left;

border: 1px solid gray;

}

.right {

margin-left: 225px;

border: 1px solid gray;

}

</style>

</head>

<body>

<div class="right">right</div>

</body>

</html>

左宽固定，右宽自适应二：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽自适应</title>

* {

margin: 0px;

padding: 0px;

}

.left {

width: 220px;

float: left;

margin-right: -100%;

background-color: red;

}

.right {

float: left;

width: 100%;

}

.right-content {

margin-left: 225px;

background-color: blue;

}

</style>

</head>

<body>

right-content

</div>

</body>

</html>

左宽固定，右宽自适应三：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽自适应</title>

* {

margin: 0px;

padding: 0px;

}

.right {

width: 100%;

float: left;

}

.right-content {

margin: 0px 0px 0px 210px;

background-color: red;

}

.left {

float: left;

margin-left: -100%;

width: 200px;

background-color: green;

}

</style>

</head>

<body>

<div class="right-content">right-content</div>

</div>

</body>

</html>

左宽固定，右宽及左右高度自适应一：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽及左右高度自适应一</title>

* {

margin: 0;

padding: 0;

}

html {

height: auto;

}

body {

margin: 0;

padding: 0;

}

#container {

background: #ffe3a6;

}

#wrapper {

display: inline-block;

border-left: 200px solid #d4c376;

position: relative;

vertical-align: bottom;

}

#sidebar {

float: left;

width: 200px;

margin-left: -200px;

position: relative;

}

#main {

float: left;

}

#sidebar, #main {

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

</head>

<body>

<div id="sidebar">Left Sidebar</div>

<div id="main">Main Content</div>

</div>

</body>

</html>

左宽固定，右宽及左右高度自适应二：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽及左右高度自适应二</title>

* {

margin: 0;

padding: 0;

}

#container {

overflow: hidden;

}

#left {

background: #ccc;

float: left;

width: 200px;

margin-bottom: -99999px;

padding-bottom: 99999px;

}

#content {

background: #eee;

margin-left: 200px;

margin-bottom: -99999px;

padding-bottom: 99999px;

}

#left, #content {

min-height: 25px;

height: auto !important;

height: 25px;

}

</style>

</head>

<body>

<div id="left" class="aside">Left Sidebar<br />Left Sidebar<br />Left Sidebar<br />Left Sidebar<br /></div>

<div id="content" class="section">Main Content</div>

</div>

</body>

</html>

左宽固定，右宽及左右高度自适应三：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽及左右高度自适应三</title>

* {

margin: 0;

padding: 0;

}

#container{

background-color:#0ff;

overflow:hidden;

padding-left:220px;

}

* html #container{

height:1%;

}

#content{

background-color:#0ff;

width:100%;

border-left:220px solid #f00;

margin-left:-220px;

float:right;

}

#sidebar{

background-color:#f00;

width:220px;

float:right;

margin-left:-220px;

}

#content, #sidebar {

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

</head>

<body>

<div id="content">Main Content</div>

<div id="sidebar">Left Sidebar</div>

</div>

</body>

</html>

左宽固定，右宽及左右高度自适应四：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽及左右高度自适应四</title>

* {

padding: 0;

margin: 0;

}

#container2 {

float: left;

width: 100%;

background: orange;

position: relative;

overflow: hidden;

}

#container1 {

float: left;

width: 100%;

background: green;

position: relative;

left: 220px;

}

#col2 {

position: relative;

margin-right: 220px;

}

#col1 {

width: 220px;

float: left;

position: relative;

margin-left: -220px;

}

#col1, #col2 {

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

</head>

<body>

<div id="col1">Left Sidebar</div>

<div id="col2">Main Content</div>

</div>

</body>

</html>

左宽固定，右宽及左右高度自适应五：

<!DOCTYPE html>

<head>

<title>左宽固定，右宽及左右高度自适应五</title>

* {

padding: 0;

margin: 0;

}

#container1 {

float: left;

width: 100%;

overflow: hidden;

position: relative;

background-color: #dbddbb;

}

#container {

background-color: orange;

width: 100%;

float: left;

position: relative;

left: 220px;

}

#left {

float: left;

margin-right: -100%;

margin-left: -220px;

width: 220px;

}

#content {

float: left;

width: 100%;

margin-left: -220px;

}

#contentInner {

margin-left: 220px;

overflow: hidden;

}

#left, #content {

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

</head>

<body>

<div id="left">Left Sidebar</div>

<div id="contentInner">Main Content</div>

</div>

</body>

</html>

三列宽度高度自适应：

<!DOCTYPE html>

<head>

<title>三列宽度高度自适应</title>

#container3 {

float: left;

width: 100%;

background: green;

overflow: hidden;

position: relative;

}

#container2 {

float: left;

width: 100%;

background: yellow;

position: relative;

right: 30%;

}

#container1 {

float: left;

width: 100%;

background: orange;

position: relative;

right: 40%;

}

#col1 {

float:left;

width:26%;

position: relative;

left: 72%;

overflow: hidden;

}

#col2 {

float:left;

width:36%;

position: relative;

left: 76%;

overflow: hidden;

}

#col3 {

float:left;

width:26%;

position: relative;

left: 80%;

overflow: hidden;

}

</style>

</head>

<body>

<div id="col1">Column 1<br />Column 1<br />Column 1<br /></div>

<div id="col2">Column 2</div>

<div id="col3">Column 3</div>

</div>

</body>

</html>