實現兩個div併排的三種方式

2022-07-23 01:48:21 字數 761 閱讀 1939

首先說明一下,本人是初學者,只是把自己遇到的一些問題的解決方法做乙個記錄,方便查閱。

一直覺得要使2個div併排是一件特別簡單的事,不就是float左邊的div嗎,後來在實際的應用中遇到問題,改了很多遍才,深刻悟出乙個道理,看似簡單的東西對我來說其實也不簡單,還需要多思考。比如按上述說float左邊div是可以,但是在我兩邊div的高度都不可控又要保持同樣高度的情況下,就特別麻煩,所以,我自己總結出了3個方法,如果各位還有其它的方法,歡迎多分享

1.float

設定好兩個div的寬度和高度,在左邊div裡面加上float:left即可。

2.margin-left

給外層div設定乙個寬度,設定右邊div的高度,然後用margin-left:200px,在左邊空出來的200px寬度範圍內就可以放左邊的div,要把左邊div的position設定為absolute.

如例子:

left

right

css如下:

.content1

.leftdiv1

.rightdiv1

效果如下:

3.table

用table來布局,乙個tr裡面的兩個td裡面分別放左右兩個div,好處就是左右td的高度看起來一樣高

完成兩個變數交換的三種方式

1.利用第三個變數交換數值,簡單的方法。int x 5,y 10 定義兩個變數 int temp x 定義第三臨時變數temp並提取x值 x y 把y的值賦給x y temp 然後把臨時變數temp值賦給y2.可以用兩個數求和然後相減的方式進行資料交換,弊端在於如果 x 和 y 的數值過大的話,超出...

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