实现两个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{ width:1000px; margin:0 auto; background:#FF69B4; } .leftDiv1{ position:absolute;; } .rightDiv1{ background:#FFC0CB; height:100px; margin-left:200px; }
效果如下:
3.Table
用table来布局,一个tr里面的两个td里面分别放左右两个div,好处就是左右td的高度看起来一样高