日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

实现两个div并排的三种方式

發布時間:2023/12/15 综合教程 29 生活家
生活随笔 收集整理的這篇文章主要介紹了 实现两个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并排的三种方式的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。