2009-04-25 77 views
0

我完全不熟悉CSS。但是我正在寫一個郵件收件箱,它就像您典型的電子郵件收件箱,其中包含From,Subject,Received 3列。用於郵件收件箱的CSS

我可以得到一些基本的CSS正確格式化該數據(排列,columning,等等),我可以建立在。

任何酷有趣的設計也歡迎。

回答

10

我覺得這是其中<table>佈局實際上是正確的佈局的少數情況之一。這是很好的,你認爲浮動的div來執行這種風格的佈局,但事實是你顯示數據的table,其中<table>標籤的唯一有效使用剩餘。這也爲您提供了具有均勻間隔的列的好處。

0

下面的是一些三欄佈局,我會相信:

老實說,雖然,而這些「可以「工作,你可能想用一張桌子。 喘氣是,一張桌子,一臺是最語義正確的選擇把表格數據與重複列。當然,也有很多的Javascript選擇做表格數據爲好。 Flexigrid is a good one worth considering.

+1

對於格式化電子郵件列,這些看起來並不合適。 – 2009-04-25 02:49:44

+0

你不是在開玩笑,我只看到了三列布局,進入了機器人模式。 – cgp 2009-04-25 03:07:34

2

您試圖顯示錶格數據,所以要真正使用的表。

雖然你也可以使用div的和浮動他們都在同一方向上實現同樣的事情,如下圖所示

<style> 
.clear {clear:both} 
#wrapper {width:500px; padding:2px; border:5px solid #000;} 
#wrapper .row {border:1px solid #000;} 
#wrapper .col {min-width:100px; border-right:1px solid #000; float:left;} 
</style> 

<div id="wrapper"> 
    <div class="row"> 
     <div class="col">From</div> 
     <div class="col">Subject</div> 
     <div class="col">Date</div> 
     <div classs="clear"></div> 
    </div> 
</div> 
0

我幾乎必須與<table> suggetions同意,因爲這是它是什麼。 你可能會認爲它是<ol>

我不知道什麼樣的'酷'設計適合於電子郵件收件箱,因爲他們大多會弄亂用戶的期望,或者我不夠明亮,不足以重寫功能性用戶界面。另外,我認爲大多數reworks會改變MVC的控制層,而不是M或V.

話雖如此......也許類似iTunes的藝術家/專輯的更新演示文稿可以工作嗎?但我不得不暗示這是一個壞主意。

0

從我與創建收件箱的經驗,你應該截斷長主題行作爲必要的,這樣列寬度將不移動或等

$message = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"; 
if(strlen($message) > 10) 
$message = substr($message, 0, 10); 
echo $message."..."; 

這將顯示主題爲WWWWWWWWWW...代替。