实现两个div并排的三种方式
生活随笔
收集整理的這篇文章主要介紹了
实现两个div并排的三种方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先說明一下,本人是初學者,只是把自己遇到的一些問題的解決方法做一個記錄,方便查閱。
一直覺得要使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.
如例子:
<div class="content1">
<div class="leftDiv1">
<p>left</p>
</div>
<div class="rightDiv1">
<p>right</p>
</div>
</div>
css如下:
.content1{
1000px;
margin:0 auto;
background:#FF69B4;
}
.leftDiv1{
position:absolute;;
}
.rightDiv1{
background:#FFC0CB;
height:100px;
margin-left:200px;
}
效果如下:
3.Table
用table來布局,一個tr里面的兩個td里面分別放左右兩個div,好處就是左右td的高度看起來一樣高
總結
以上是生活随笔為你收集整理的实现两个div并排的三种方式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端 圆形进度图_CSS3+JS实现静态
- 下一篇: 第五人格红蝶怎么样 红蝶玩法小技巧汇总详