摘要：實現(xiàn)三欄布局，中間自適應(yīng)負值法放第一行首尾高度固定中間自適應(yīng)的布局兼容頭部中間置頂中間中間到底尾部針對設(shè)定的布局粘連置于底部方法一在上用負的粘連置于底部方法二在上用負的
實現(xiàn)三欄布局，中間自適應(yīng)（margin負值法）
middleleftright
body {
margin: 0;
padding: 0;
}
.left, .right {
height: 300px;
width: 200px;
float: left;
}
.right {
margin-left: -200px;
background-color: red;
}
.left {
margin-left: -100%;
background-color: #00ff00;
}
.middle {
height: 300px;
width: 100%;
float: left;
background-color: blue;
}
首尾高度固定、中間自適應(yīng)的DIV布局（兼容IE6）
頭部
- 中間置頂
- 中間
...- 中間到底
尾部
html, body {
margin: 0;
/*padding: 0;*/
height: 100%;
overflow: hidden;
}
.top, .bottom {
width: 100%;
height: 50px;
position: absolute;
}
/** {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
width: 100%;
}
div {
position: absolute;
}
.top, .bottom {
width: 100%;
height: 100px;
z-index: 5;
}*/
.top {
background: red;
top: 0;
}
.bottom {
background: #00ff00;
bottom: 0;
}
.middle {
width: 100%;
top: 50px;
bottom: 50px;
background: #a7fad7;
overflow: auto;
position: absolute;
/*針對ie6設(shè)定的hack*/
_height: 100%;
_border-top: -100px solid #eee;
_border-bottom: -100px solid #eee;
_top: 0;
}
flex-box布局
Main Content
I"m first in the source order.
The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you"re accessories to.
I"ll get my kit! That"s not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.
body {
padding: 2em;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1, h2 {
font: bold 2em Sans-serif;
margin: 0 0 1em 0;
}
h2 {
font-size: 1.5em;
}
p {
margin: 0 0 1em 0;
}
.page-wrap {
display: flex;
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
}
.main-content,
.main-sidebar,
.main-nav {
padding: 1em;
}
.main-content {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
order: 2;
width: 60%;
-moz-box-flex: 1;
background: white;
}
.main-nav {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 20%;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
}
.main-sidebar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
order: 3;
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 20%;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
background: #ccc;
}
粘連 Footer 置于底部-方法一
HTML在 wrapper 上用負的 margin-bottom
CSS
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
padding: 20px;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
padding: 20px;
}
JS
$("#add").on("click", function () {
$("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
").insertBefore(".push");
});
粘連 Footer 置于底部-方法二
HTML在 footer 上用負的 margin-top
CSS
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
JS
$("#add").on("click", function () {
$("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
").appendTo(".content-inside");
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111828.html
摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
閱讀 2053·2021-10-08 10:05
閱讀 1893·2021-09-22 15:31
閱讀 3016·2021-09-22 15:13
閱讀 3498·2021-09-09 09:34
閱讀 2105·2021-09-03 10:46
閱讀 3130·2019-08-30 15:56
閱讀 1710·2019-08-30 15:53
閱讀 2367·2019-08-30 15:44
