float 配置方式
利用float將box配置在左或右側時,後續的內容會以相反方向圍繞該box
---------------------------------------------------------------------------
SAMPLE A: 指定box配置方式
div {background:orange;
width:200px;
padding:10;
text-align:center; float:right} <!--float屬性指定在左邊,文字會圍繞此box-->
<div><img src="image.jpg" alt="" width="145" height="188" /><br/>dpi設計流行創意雜誌</div><p>dpi設計流行創意雜誌 : dpi它所代表的不再僅僅是圖像解析度單位,現在它所代表的是設計(design)、流行(popular)、創意(innovation)三種意義。這是一份不同時下一般雜誌的雜誌書,不但兼具書及雜誌的特點,同時本雜誌兼具專業設計與學習性,並配合現今網際網路的發達,每期都會介紹最新的設計訊息,不斷地發掘台灣的新生代設計家,給台灣設計師揮灑的舞台,是一本真正道地的台灣設計雜誌。另外在內容上,除了設計也加入了流行資訊、另類的主題以及舉行校園研討會,更加深讀者與廠商的互動;舉辦不同主題的比賽活動,更是讓設計師滿足了創作的需求,更拉近了企業與設計師的距離。 每期皆會有不同類型的特刊呈現,展現設計的多元化以及增加收藏價值。</p>
對<div>指定float:left之後,就會把<div>構成的box配置在左側,後續的內文圍繞在另一側 
沒有用float的話就不會繞文顯示
SAMPLE C: 水平並列顯示block box(段落組合)
#column1 {background-color:orange;
width:200px;
padding:10px;
text-align:center;
float:left}
#column2 {background-color:greenyellow;
width:400px;
padding:0 10px;
margin-left:20px;
float:left}
<div id="column1">
<img src="image.jpg" alt="" width="145" height="188" /><br/>
dpi設計流行創意雜誌
</div>
<div id="column2">
<p>dpi設計流行創意雜誌 : dpi它所代表的不再僅僅是圖像解析度單位,現在它所代表的是設計(design)、流行(popular)、創意(innovation)三種意義。</p>
<p>這是一份不同時下一般雜誌的雜誌書,不但兼具書及雜誌的特點,同時本雜誌兼具專業設計與學習性,並配合現今網際網路的發達,每期都會介紹最新的設計訊息,不斷地發掘台灣的新生代設計家,給台灣設計師揮灑的舞台,是一本真正道地的台灣設計雜誌。另外在內容上,除了設計也加入了流行資訊、另類的主題以及舉行校園研討會,更加深讀者與廠商的互動;舉辦不同主題的比賽活動,更是讓設計師滿足了創作的需求,更拉近了企業與設計師的距離。 每期皆會有不同類型的特刊呈現,展現設計的多元化以及增加收藏價值。</p>
</div>
注意要兩個div區塊都設置float才可水平排列顯示,若有一個沒設定float,則box會相疊再一起
Previous in This Category: width & height (min-max) Next in This Category: clear 解除
Only members can post a comment, Login first