【學習筆記】常見 CSS 佈局
水平垂直居中
/* 公共代碼 */
<div class="wp">
<div class="box size">123123</div>
</div>
複製代碼
居中元素定寬高
absolute + 負 margincss
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
複製代碼
absolute + margin autohtml
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
複製代碼
absolute + calc瀏覽器
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
複製代碼
居中元素不定寬高
absolute + transformmarkdown
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
複製代碼
line-height + heightide
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
line-height: 300px; /*行高的值與height相等*/
text-align: center;
font-size: 0; /*消除幽靈空白節點、近似居中的bug*/
}
.box {
background: green;
display: inline-block; /*若是是塊級元素需改成行內或行內塊級才生效*/
vertical-align: middle;
font-size: 16px;
line-height: initial; /*默認值*/
text-align: left; /*修正文字*/
}
複製代碼
inline-blockoop
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
display: inline-block;
white-space: nowrap;
text-align: center;
}
.wp::after {
content:'';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.box {
background: green;
display: inline-block; /*若是是塊級元素需改成行內或行內塊級才生效*/
vertical-align: middle;
}
複製代碼
table
tabel 單元格中的內容自然就是垂直居中的，需添加一個水平居中屬性便可，該方法代碼太冗餘佈局
<table>
<tbody> <tr> <td class="wp"> <div class="box">123123</div> </td> </tr> </tbody>
</table>
// css
.wp {
text-align: center;
}
.box {
display: inline-block;
}
複製代碼
table-cell：CSS 新增的 table 屬性，可把普通元素變爲 table 元素的現實效果，該方法和table同樣原理，但沒有那麼多冗餘代碼，兼容性也還不錯flex
.wp {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
display: inline-block;
}
複製代碼
flex：注意兼容性spa
.wp {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
複製代碼
grid：網格佈局，代碼量也不多，但兼容性不如 flex3d
.wp {
display: grid;
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
align-self: center;
justify-self: center;
}
複製代碼
writing-mode：能夠改變文字的顯示方向，如可經過 writing-mode 讓文字的顯示變爲垂直方向，結合 text-align 可實現
<div class="wp">
<div class="wp-inner"> <div class="box">123123</div> </div>
</div>
wp {
writing-mode: vertical-lr;
text-align: center;
border: 1px solid red;
width: 300px;
height: 300px;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
width: 100%;
}
.box {
background: green;
display: inline-block;
}
複製代碼
PC端無兼容性要求，推薦 flex；移動端推薦使用 flex；關於 flex 的兼容性決方案，請看這裏《移動端flex佈局實戰》
兩列布局
左列定寬，右列自適應
float + margin
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
.left {
background-color: red;
float: left;
width: 100px;
height: 500px;
}
.right {
background-color: yellow;
height: 500px;
margin-left: 100px; /*大於等於 left 的寬度*/
}
複製代碼
float + margin(fix)
<div class="left">左列定寬</div>
<div class="right-fix"> <div class="right">右列自適應</div> </div>
.left {
background-color: red;
float: left;
width: 100px;
height: 500px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px; /*正值大於或等於 left 的寬度，才能顯示在同一行*/
}
.right {
background-color: yellow;
height: 500px;
margin-left: 100px; /*大於等於 left 的寬度*/
}
複製代碼
float + overflow
- 優勢：代碼簡單，容易理解，無需關注定寬的寬度，利用 bfc 達到自適應效果
- 缺點：浮動脫離文檔流，須要手動清除浮動，不然容易產生高度塌陷；不支持ie6
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
.left {
background-color: red;
float: left;
width: 100px;
height: 500px;
}
.right {
background-color: yellow;
height: 500px;
overflow: hidden; /*觸發 BFC 達到自適應*/
}
複製代碼
絕對定位
<div class="parent">
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
</div>
.parent {
position: relative; /*子絕父相*/
}
.left {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 500px;
}
.right {
background-color: yellow;
height: 500px;
position: absolute;
top: 0;
left: 100px; /*值大於等於 left 的寬度*/
right: 0;
}
複製代碼
flex
<div class="parent">
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
</div>
.parent {
width: 100%;
height: 500px;
display: flex;
}
.left {
width: 100px;
background-color: red;
}
.right {
background-color: yellow;
flex: 1; /*均分了父元素剩餘空間*/
}
複製代碼
table
- 優勢：代碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
- 缺點：margin失效；設置間隔比較麻煩；不支持ie8-
<div class="parent">
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
</div>
.parent {
width: 100%;
height: 500px;
display: table;
}
.left, .right {
display: table-cell; /*利用單元格自動分配寬度*/
}
.left {
width: 100px;
background-color: red;
}
.right {
background-color: yellow;
}
複製代碼
Grid
<div class="parent">
<div class="left">左列定寬</div>
<div class="right">右列自適應</div>
</div>
.parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*設定 2 列就 ok 了，auto 換成 1fr 也行*/
}
.left {
background-color: red;
}
.right {
background-color: yellow;
}
複製代碼
左列自適應，右列定寬
float + margin
<div class="parent">
<div class="left">左列自適應</div>
<div class="right">右列定寬</div>
</div>
.parent {
padding-left: 100px; /*抵消 left 的 margin-left 以達到 parent 水平居中*/
}
.left {
width: 100%;
height: 500px;
float: left;
margin-left: -100px; /*正值等於 right 的寬度*/
background-color: #f00;
}
.right {
height: 500px;
width: 100px;
float: right;
background-color: #0f0;
}
複製代碼
float + overflow
<div class="parent">
<div class="right">右列定寬</div>
<div class="left">左列自適應</div> <!--順序要換一下-->
</div>
.left {
background-color: #f00;
overflow: hidden; /*觸發bfc*/
height: 500px;
}
.right {
height: 500px;
width: 100px;
float: right;
background-color: #0f0;
}
複製代碼
其餘的方法如絕對定位、flex、table、grid 與【左列定寬右列自適應】相反
一列不定寬，一列自適應（盒子寬度隨着內容增長或減小發生變化,另外一個盒子自適應）
改變前
改變後
float + overflow
<div class="parent">
<div class="left">左列不定寬</div>
<div class="right">右列自適應</div>
</div>
.left {
margin-right: 10px;
float: left; /*只設置浮動,不設寬度*/
height: 500px;
background-color: #f00;
}
.right {
overflow: hidden; /*觸發 bfc */
height: 500px;
background-color: #0f0;
}
複製代碼
flex
<div class="parent">
<div class="left">左列不定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
display: flex;
}
.left { /*不設寬度*/
margin-right: 10px;
height: 500px;
background-color: #f00;
}
.right {
height: 500px;
background-color: #0f0;
flex: 1; /*均分 parent 剩餘的部分*/
}
複製代碼
Grid
<div class="parent">
<div class="left">左列不定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
display: grid;
grid-template-columns: auto 1fr; /* auto 和 1fr 換一下順序就是左列自適應，右列不定寬了*/
}
.left {
margin-right: 10px;
height: 500px;
background-color: red;
}
.right {
height: 500px;
}
複製代碼
三列布局
兩列定寬，一列自適應
float + margin
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間定寬</div>
<div class="right">右列自適應</div>
</div>
.parent {
min-width: 310px; /* 100+10+200，防止寬度不夠，子元素換行*/
}
.left {
margin-right: 10px; /* left 和 center 間隔*/
float: left;
width: 100px;
height: 500px;
background-color: red;
}
.center {
float: left;
width: 200px;
height: 500px;
background-color: green;
}
.right {
margin-left: 320px; /*等於 left 和 center 的寬度之和加上間隔，多出來的就是 right 和 center 的間隔*/
height: 500px;
background-color: #0f0;
}
複製代碼
float + overflow
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
min-width: 320px; /* 100+10+200+10，防止寬度不夠，子元素換行*/
}
.left {
margin-right: 10px; /* left 和 center 間隔*/
float: left;
width: 100px;
height: 500px;
background-color: red;
}
.center {
float: left;
width: 200px;
height: 500px;
background-color: green;
margin-right: 10px; /*在此定義和 right 的間隔*/
}
.right {
overflow: hidden; /*觸發 bfc*/
height: 500px;
background-color: yellow;
}
複製代碼
flex
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
height: 500px;
display: flex;
}
.left {
margin-right: 10px; /* left 和 center 間隔*/
width: 100px;
background-color: red;
}
.center {
width: 200px;
background-color: green;
margin-right: 10px; /*在此定義和 right 的間隔*/
}
.right {
flex: 1; /*均分 parent 剩餘的部分達到自適應*/
background-color: yellow;
}
複製代碼
table
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
width: 100%;
display: table;
height: 520px; /*抵消上下間距 10*2 的高度影響*/
margin: -10px 0; /*抵消上下間距 10 的位置影響*/
/*左右兩邊間距大了一點，子元素改用 padding 設置盒子間距就沒有這個問題*/
border-spacing: 10px; /*如下子元素 margin 設置間距失效，關鍵!!!設置間距*/
}
.left {
display: table-cell;
width: 100px;
background-color: red;
}
.center {
width: 200px;
background-color: green;
display: table-cell;
}
.right {
display: table-cell;
background-color: yellow;
}
複製代碼
Grid
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間定寬</div>
<div class="right">右列自適應</div>
</div>
.parent{
height: 500px;
display: grid;
grid-template-columns: 100px 200px auto; /*設置 3 列，固定第一第二列的寬度，第三列 auto 或者 1fr*/
}
.left {
margin-right: 10px; /*間距*/
background-color: red;
}
.center {
margin-right: 10px; /*間距*/
background-color: green;
}
.right {
background-color: yellow;
}
複製代碼
兩側定寬，中間自適應
聖盃佈局
- 利用浮動和相對定位實現
- 缺點：聖盃佈局會有個問題，當將瀏覽器寬度縮短到必定程度時會使得中間子元素的寬度比左右子元素寬度小，這時佈局就會出現問題，因此在使用聖盃佈局時必定要設置整個容器的最小寬度
<div class="header">header</div>
<div class="parent"> <!--#center須要放在前面--> <div class="center">中間自適應 <hr> <!--方便觀察原理--> </div> <div class="left">左列定寬</div> <div class="right">右列定寬</div> </div> <div class="footer">footer</div> .header, .footer { height: 60px; background-color: #ccc; } .parent { height: 300px; padding: 0 215px 0 115px; /*爲了使 center 擺正，左右 padding 分別等於左右盒子的寬，能夠結合左右盒子相對定位的 left 調整間距*/ } .parent div { height: 300px } .left, .center, .right { position: relative; float: left; } .left { margin-left: -100%; /*使 left 上去一行*/ left: -115px; /*相對定位調整 left 的位置，正值大於或等於自身寬度*/ background-color: red; width: 100px; } .center { width: 100%; /*因爲 parent 的 padding，達到自適應的目的*/ box-sizing: border-box; border: 1px solid #000; background-color: yellow; } .right { left: 215px; /*相對定位調整 right 的位置，大於或等於自身寬度*/ width: 200px; margin-left: -200px; /*使 right 上去一行*/ background-color: green; } 複製代碼
雙飛翼佈局
- 爲了解決聖盃佈局的弊端，實現中間部分自適應時多嵌套了一個 div 且再也不使用相對定位
<div class="header">header</div>
<div class="parent"> <!--#center須要放在前面--> <div class="center"> <div class="center_inner">中間自適應</div> <hr> <!--方便觀察原理--> </div> <div class="left">左列定寬</div> <div class="right">右列定寬</div> </div> <div class="footer">footer</div> .header, .footer { height: 60px; background-color: #ccc; } .parent, .parent div { height: 300px } .left, .center, .right { float: left; } .left { margin-left: -100%; /*使 left 上去一行*/ background-color: red; width: 100px; } .center { width: 100%; border: 1px solid #000; background-color: yellow; } .center_inner { height: 280px; border: 1px solid #000; margin: 0 220px 0 120px; /*關鍵!!!左右邊界等於左右盒子的寬度，多出來的爲盒子間隔*/ } .right { width: 200px; margin-left: -200px; /*使 right 上去一行*/ background-color: green; } 複製代碼
flex
- flex: flex-grow | flex-shrink | flex-basis; 分別爲：空間充足放大比,空間不足縮小比以及計算剩餘空間以前的寬度值
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間自適應</div>
<div class="right">右列定寬</div>
</div>
.parent {
display: flex;
}
.parent div {
height: 300px;
}
.left, .right {
width: 200px; /* flex: 0 0 200px; */
}
.left {
background-color: red;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
background-color: green;
}
複製代碼
position
- 優勢：容易理解，兼容性比較好
- 缺點：需手動計算寬度肯定邊距；脫離文檔流；代碼繁多
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間自適應</div>
<div class="right">右列定寬</div>
</div>
.parent {
position: relative; /*子絕父相*/
}
.parent div {
height: 300px;
}
.left, .right {
width: 200px; /* flex: 0 0 200px; */
}
.left {
position: absolute;
top: 0;
left: 0;
background-color: red;
}
.center {
margin-left: 200px; /*大於等於 left 的寬度或者給 parent 添加一樣大小的 padding-left*/
margin-right: 200px; /*大於等於 right 的寬度或者給 parent 添加一樣大小的 padding-right*/
background-color: yellow;
}
.right {
position: absolute;
top: 0;
right: 0;
background-color: green;
}
複製代碼
table
- 優勢：代碼簡潔，容易理解；
- 缺點：margin失效，採用border-spacing表格兩邊的間隔沒法消除；不支持ie8-
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間自適應</div>
<div class="right">右列定寬</div>
</div>
.parent {
width: 100%;
height: 500px;
display: table;
}
.left, .right {
width: 200px; /* flex: 0 0 200px; */
}
.left {
display: table-cell;
background-color: red;
}
.center {
display: table-cell;
background-color: yellow;
}
.right {
display: table-cell;
background-color: green;
}
複製代碼
Grid
- Grid 是微軟提出的網頁佈局解決方案，最新的 Safari、Chrome、Firefox 都已經進行了支持。我的感受 Grid 佈局比 flex 佈局更強大一些，寬高兩個方向上均可以獲得控制且 Grid 也更容易理解（但 Grid 在移動端的支持應該沒有 flex 強）
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間自適應</div>
<div class="right">右列定寬</div>
</div>
.parent {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 100px
}
.left {
background-color: red;
}
.center {
background-color: yellow;
}
.right {
background-color: green;
}
複製代碼
<div class="parent">
<div class="header"></div>
<div class="left">左列定寬</div>
<div class="center"> 中間自適應 <hr /> </div>
<div class="right">右列定寬</div>
<div class="footer"></div>
</div>
.parent {
height: 500px;
display: grid;
grid-template-columns: 100px auto 200px; /*設定3列*/
grid-template-rows: 60px auto 60px; /*設定3行*/
/*設置網格區域分佈*/
grid-template-areas:
"header header header"
"leftside main rightside"
"footer footer footer";
}
.header,.footer {
background-color: #ccc;
}
.header {
grid-area: header; /*指定在哪一個網格區域*/
}
.left {
grid-area: leftside;
background-color: red;
}
.center {
grid-area: main; /*指定在哪一個網格區域*/
margin: 0 15px; /*設置間隔*/
border: 1px solid #000;
background-color: yellow;
}
.right {
grid-area: rightside; /*指定在哪一個網格區域*/
background-color: green;
}
.footer {
grid-area: footer; /*指定在哪一個網格區域*/
}
複製代碼
CSS3 的 calc
- CSS3 提供的 calc 功能可以實現給寬高等設置動態的值，支持 + - * / 四則運算，注意運算符兩邊要個留一個空格不然設置無效
- 一樣須要設置浮動將三個元素並排顯示
<div class="parent">
<div class="left">左列定寬</div>
<div class="center">中間自適應</div>
<div class="right">右列定寬</div>
</div>
.parent div {
float: left;
height: 300px;
}
.left, .right {
width: 200px;
background-color: red;
}
.center {
width: calc(100% - 400px);
background-color: green;
}
複製代碼
多列布局
多列等寬佈局
float
- 優勢：代碼簡單，容易理解；兼容性較好
- 缺點：須要手動清除浮動，不然會容易產生高度塌陷
<div class="parent">
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
</div>
.column {
width: 25%;
float: left;
box-sizing: border-box;
border: 1px solid #000;
background-clip: content-box; /*背景色從內容開始繪製，方便觀察*/
height: 500px;
}
.column:nth-child(odd) {
background-color: red;
}
.column:nth-child(even) {
background-color: green;
}
複製代碼
flex
<div class="parent">
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
</div>
.parent {
margin-left: -15px; /*使內容看起來居中*/
height: 500px;
display: flex;
}
.column {
flex: 1; /*一塊兒平分 parent*/
margin-left: 15px; /*設置間距*/
}
.column:nth-child(odd) {
background-color: red;
}
.column:nth-child(even) {
background-color: green;
}
複製代碼
table
<div class="parent">
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
</div>
.parent {
height: 500px;
display: table;
margin: -20px 0; /*抵消上下邊 20*2 間距的位置影響*/
/*兩邊離頁面間距較大，改用子元素設置 padding 來當成間隔就不會有這樣的問題*/
border-spacing: 20px; /*設置間距*/
}
.column {
display: table-cell;
}
.column:nth-child(odd) {
background-color: red;
}
.column:nth-child(even) {
background-color: green;
}
複製代碼
Grid
<div class="parent">
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
<div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div>
</div>
.parent {
height: 500px;
display: grid;
grid-template-columns: repeat(4, 1fr); /*4 就是列數*/
}
.column:nth-child(odd) {
background-color: red;
}
.column:nth-child(even) {
background-color: green;
}
複製代碼
九宮格佈局
table
<div class="parent">
<div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
<div class="row"> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
<div class="row"> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
</div>
.parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: table;
}
.row {
display: table-row;
}
.item {
border: 1px solid #000;
display: table-cell;
}
複製代碼
flex
<div class="parent">
<div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
<div class="row"> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
<div class="row"> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
</div>
.parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex: 1;
}
.item {
flex: 1;
border: 1px solid #000;
}
複製代碼
Grid
- CSS Grid 很是強大，能夠實現各類各樣的三維佈局
<div class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr); /*等同於1fr 1fr 1fr，此爲重複的合併寫法*/
grid-template-rows: repeat(3, 1fr); /*等同於1fr 1fr 1fr，此爲重複的合併寫法*/
}
.item {
border: 1px solid #000;
}
複製代碼
柵格系統
- 優勢：代碼簡潔，容易理解；提升頁面內容的流動性，能適應多種設備
Less
/*生成柵格系統*/
@media screen and (max-width: 768px){
.generate-columns(12); /*此處設置生成列數*/
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-xs-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}
@media screen and (min-width: 768px){
.generate-columns(12); /*此處設置生成列數*/
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-sm-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}
div[class^="column-xs-"]{
float: left;
}
div[class^="column-sm-"]{
float: left;
}
複製代碼
編譯後的 CSS 代碼
@media screen and (max-width: 768px) {
.column-xs-1 { width: 8.33333333%; }
.column-xs-2 { width: 16.66666667%; }
.column-xs-3 { width: 25%; }
.column-xs-4 { width: 33.33333333%; }
.column-xs-5 { width: 41.66666667%; }
.column-xs-6 { width: 50%; }
.column-xs-7 { width: 58.33333333%; }
.column-xs-8 { width: 66.66666667%; }
.column-xs-9 { width: 75%; }
.column-xs-10 { width: 83.33333333%; }
.column-xs-11 { width: 91.66666667%; }
.column-xs-12 { width: 100%; }
}
@media screen and (min-width: 768px) {
.column-sm-1 { width: 8.33333333%; }
.column-sm-2 { width: 16.66666667%; }
.column-sm-3 { width: 25%; }
.column-sm-4 { width: 33.33333333%; }
.column-sm-5 { width: 41.66666667%; }
.column-sm-6 { width: 50%; }
.column-sm-7 { width: 58.33333333%; }
.column-sm-8 { width: 66.66666667%; }
.column-sm-9 { width: 75%; }
.column-sm-10 { width: 83.33333333%; }
.column-sm-11 { width: 91.66666667%; }
.column-sm-12 { width: 100%; }
}
div[class^="column-xs-"]{
float: left;
}
div[class^="column-sm-"]{
float: left;
}
複製代碼
大小不固定，圖片的水平垂直居中
相關文章
- 1. 【學習筆記】CSS 佈局
- 2. css常見佈局
- 3. CSS常見佈局
- 4. CSS常用佈局學習
- 5. 【筆記】學習CSS佈局15——inline-box
- 6. CSS學習筆記——響應式佈局
- 7. CSS flex佈局一（學習筆記）
- 8. 常見 css 佈局整理
- 9. CSS 常見佈局方式
- 10. css常見佈局方式
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【學習筆記】CSS 佈局
- 2. css常見佈局
- 3. CSS常見佈局
- 4. CSS常用佈局學習
- 5. 【筆記】學習CSS佈局15——inline-box
- 6. CSS學習筆記——響應式佈局
- 7. CSS flex佈局一（學習筆記）
- 8. 常見 css 佈局整理
- 9. CSS 常見佈局方式
- 10. css常見佈局方式