div是塊狀元素。所謂塊狀元素，就是預設一行只能有一個，不管這行後面有沒有剩餘的位置，第二個都會放到第二行。
一般讓兩個div放到一行的方法是做如下定義
#div1{display:inline; float:left;}
其中，display:inline表示將其轉換為內嵌元素，然後一行就可以放置多個了。float:left表示向左漂，所有的元素都會依次飄在左上方。
如果就是不想用float，能不能把兩個塊狀元素放到一行呢？答案是可以的。
為了實現這個效果，就要藉助position標籤的力量了。
position標籤屬性多多，這是每個值的作用。
| 值 | 描述 |
|---|---|
| absolute | 產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 產生絕對位置的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 產生相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
現在我希望先放一個大的div框框，並且把它放在螢幕中央，然後在它裡面畫四格小框框。每個小框和大框的邊距是50px，小框之間的間距也是50px。
absolute是個不錯的值，可是它不能實現位置隨著瀏覽器視窗改變而改變的效果。
於是我的眼珠滴溜溜的轉到了relative上面。大家猜猜top,left都需要設定成多少，才能把四個小框框的位置排出來呢？反正我是沒猜對……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>為什麼一定要加float標籤呢</title><style type="text/css">body, div{margin:0; padding:0}#out{height:550px; width:750px; margin:0 auto; background:#ddd;}#lefttop{position:relative; top:50px; left:50px; width:300px; height:200px; border:dashed 1px #0000FF;}#righttop{position:relative; top:-150px; left:400px; width:300px; height:200px; border:dashed 1px #00FF00;}#leftbottom{position:relative; top:-100px; left:50px; width:300px; height:200px; border:dashed 1px #FF9900;}#rightbottom{position:relative; top:-300px; left:400px; width:300px; height:200px; border:dashed 1px #9900FF;}</style></head><body><div id="out"><div id="lefttop"></div><div id="righttop"></div><div id="leftbottom"></div><div id="rightbottom"></div></div></body></html>
left值好理解，就是實際的邊距了。top值是怎麼回事呢？原來第一個框放完之後，佔用了200px的height，第二個框預設的位置是200px，現在要放在50px的位置，所以top要設定成-150px啦！以此類推，後面兩個也這樣設定。
怪不得要用float呢，這個方法確實有點麻煩呀，想改變第一個div的高度，後面的值都要重新計算了！
那麼採用float的方法再寫一遍吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>我承認float可以簡化代碼</title><style type="text/css">body, div{margin:0; padding:0}#out{height:550px; width:750px; margin:0 auto; background:#ddd;}#lefttop,#righttop,#leftbottom,#rightbottom{width:300px; height:200px; border:dashed 1px; display:inline; float:left;margin:50px 0 0 50px;}/*這裡有個小細節：由於border有1px，如果右側的右邊界設定為50px，會因為超出out的範圍，跑到下一行了。*/#lefttop{ border: #0000FF;}#righttop{ border: #00FF00;}#leftbottom{border:#FF9900;}#rightbottom{border:#9900FF;}</style></head><body><div id="out"><div id="lefttop"></div><div id="righttop"></div><div id="leftbottom"></div><div id="rightbottom"></div></div></body></html>
精簡了一下代碼，把值相同的設定堆一塊去。
開始還犯了一個錯誤，心想左側的float:left，右側的想必是float:right了……原來所有的div都必須一致的向左上看呀！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
