越來越多美編喜歡用 DIV 來設計樣板，不像我們傳統工程師，都是用 Table 去 layout 畫面。或許在未來新的瀏覽器裡，對 CSS 的支援更強大、更統一之後，以 DIV + CSS 為設計的方式將會越來越普遍。但將來的事，現在說什麼都還算太早，眼下我先搞定如何將兩個 DIV 放在同一列比較重要。
原先我都以為使用 DIV ，就一定會佔用一行的空間。沒想到透過 {float:left;} 的 CSS 定義後，就可以讓好幾個 DIV 擠在一起。
參考一下 HTML：
<!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><title></title>
<style>
.oneline
{
float:left;
}
div{
border-width:1px;
border-color:red;
border-style:solid;
border-color: #336699;
padding:1px;
}
</style>
</head>
<body>
<div style="padding-top:30px" class="oneline">元素A</div>
<div class="oneline">元素B</div>
<div style="clear:left;">元素C</div>
</body>
</html>
此外，除了使用 float:left 之外，還可以用 display:inline; 來達到擠在同一列的效果，差別在於 display:inline 會有靠下對齊的效果，而 float: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><title></title>
<style>
.oneline
{
display:inline;
}
div{
border-width:1px;
border-color:red;
border-style:solid;
border-color: #336699;
padding:1px;
}
</style>
</head>
<body>
<div style="padding-top:30px" class="oneline">元素A</div>
<div class="oneline">元素B</div>
<div style="clear:left;">元素C</div>
</body>
</html>
1.關於CSS DIV並排的問題
http://www.lslnet.com/linux/f/docs1/i30/big5240138.htm
2.CSS display 屬性用法介紹 display:block 與 display:inline
http://www.webtech.tw/info.php?tid=37
3.Float vs. Inline-Block
http://www.ternstyle.us/blog/float-vs-inline-block
沒有留言:
張貼留言