css怎麼讓兩個table併排 關於CSS布局

2021-10-13 17:38:20 字數 4013 閱讀 4492

水平居中可能是css布局中最常用到的布局，這裡介紹幾種水平居中的方式

1、使用inline-block 和 text-align實現

.parent


.child
優點：相容性好；

不足：需要同時設定子元素和父元素

2、使用margin:0 auto來實現

.child
優點：相容性好

缺點: 需要指定寬度

3、使用table實現

.child
優點:只需要對自身進行設定

不足:ie6,7需要調整結構

4、使用絕對定位實現

.parent


.chlid


.parent


/*或者實用margin-left的負值為盒子寬度的一半也可以實現，不過這樣就必須知道盒子的寬度，但相容性好*/


.child
不足：相容性差,ie9及以上可用

5、使用flex布局實現

/*第一種方法*/


.parent


/*第二種方法*/


.parent


.child
缺點：相容性差，如果進行大面積的布局可能會影響效率

1、使用vertical-aligin（在使用vertical-align的時候，由於對齊的基線是用行高的基線作為標記，故需要設定line-height或設定display:table-cell;）

/*第一種方法*/


.parent


/*第二種方法*/


.parent
2、絕對定位

.parent


.child
3、flex

.parent
另外有幾個水平垂直全部劇中的方式

1、利用vertical-align,text-align,inline-block實現

.parent


.child
2、利用絕對定位實現

.parent


.child
3、利用flex實現

.parent
左右定寬適用於定寬的一側為導航，自適應的一側為內容的布局

1、利用float+margin實現

.left


.right
2、利用float+margin(fix)實現

.left


.right-fix


.right
3、使用float+overflow實現

.left


.right
4、overflow:hidden，觸發bfc模式，浮動無法影響，隔離其他元素，ie6不支援，左側left設定margin-left當作left與right之間的邊距，右側利用overflow:hidden 進行形成bfc模式

如果我們需要將兩列設定為等高，可以用下述方法將「背景」設定為等高，其實並不是內容的等高

.left


.right


.parent


.left,.right
5、使用table實現

.parent


.left


.right,.left
6、實用flex實現

.parent


.left


.right
利用右側容器的flex:1，均分了剩餘的寬度，也實現了同樣的效果。而align-items 預設值為stretch，故二者高度相等

右列定寬，左列自適應

1、實用float+margin實現

.parent


.left


.right
2、使用table實現

.parent


.left


.right
3、實用flex實現

.parent


.left


.right
兩列定寬，一列自適應基本html結構為父容器為parent,自容器為left,center,right.其中，left,center定寬，right自適應

1、利用float+margin實現

.left,.center


.right
2、利用float+overflow實現

.left,.center


.right
3、利用table實現

.parent


.left,.center,.right


.left,.center
4、利用flex實現

.parent


.left,.center


.right
兩側定寬，中欄自適應1、利用float+margin實現

.left


.center


.right
2、利用table實現

.parent


.left,.center,.right


.left


.right
3、利用flex實現

.parent


.left


.center


.right
一列不定寬，一列自適應1、利用float+overflow實現

.left


.right
2、利用table實現

.parent


.left


.left,.right
3、利用flex實現

.parent


.right
多列等分布局多列等分布局常出現在內容中，多數為功能的，同階級內容的併排顯示等。

html結構如下

111


1
1、實用float實現

.parent/*假設列之間的間距為20px*/


.column
2、利用table實現

.parent-fix


.parent


.column
3、利用flex實現

.parent


.column


.column+.column
九宮格布局1、使用table實現
2、實用flex實現

讓兩個Div併排顯示

一 使用display的inline屬性 aaaa bbbb 二 通過設定float來讓div併排顯示 1111 2222 2222 2222 三 對於兩個div併排，左邊為絕對寬度，右邊為相對寬度的，需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面 1 將最大的容器padding l...

讓兩個Div併排顯示

一 使用display的inline屬性 html divstyle width 300px height auto float left display inline aaaa div divstyle width 300px height auto float left display inli...

樣式 讓兩個Div併排顯示

一 使用display的inline屬性 html divstyle width 300px height auto float left display inline aaaa div divstyle width 300px height auto float left display inli...