July 2, 2013

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會相疊再一起 

0推薦此文章
Today's Visitors: 0 Total Visitors: 2
Personal Category: # CSS Topic: technology / tech info / programming
Previous in This Category: width & height (min-max)   Next in This Category: clear 解除

誰來收藏
Loading ...
unlog_NVPO 0