兩個div不同高度併排顯示

2022-03-17 20:51:06 字數 723 閱讀 2665

在html中讓兩個div併排顯示,通常情況下有三種實現方式,包括:

(1)設定為行內樣式,display:inline-block

(2)設定float浮動

(3)設定position定位屬性為absolute

以下為三種方式的具體實現**:

1、設定每個div的展現屬性為行內樣式,示例**為:

2、設定float浮動,示例**為:

div1

div2

3、設定position定位屬性為absolute, 示例**為:

div1

div2

擴充套件資料:

css清除浮動方法

(1)新增新的元素 、應用 clear:both

.clear

(2)父級div定義 overflow: auto

.over-flow     /*==for ie6/7 maxthon2==*/

.outer :after {

clear:both;

content:'.';

display:block;

width: 0;

height: 0;

visibility:hidden; 

讓兩個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...