メール受信トレイ用のCSS

Question

私はCSSを初めて使っています。しかし、私はFrom、Subject、Receivedの3つの列を含む典型的な電子メール受信箱のようなメール受信トレイを作成しています。

このデータを適切に整形するための基本的なCSS（整列、整列など）を、私が構築できるようにすることはできますか。

おもしろいデザインも大歓迎です。ここで

Answer 1

これは、<table>のレイアウトが実際に正しいレイアウトであるという少数のシナリオの1つであると私は思っています。フローティングディビジョンをこのスタイルのレイアウトを実行すると考えるのは良いことですが、実際には<table>タグの唯一の有効な使用方法であるtableのデータを表示しています。これにより、列が均等に配置される利点も得られます。

Answer 2

のは、いくつかの3列レイアウトは、私が信頼してしまうのとおりです。

• http://www.alistapart.com/articles/holygrail
• http://designshack.co.uk/gallery/layout/3column/は正直いえ
• http://matthewjamestaylor.com/blog/perfect-3-column.htm

（この1つはいくつかのインスピレーションのための例があります）、「これらの間、おそらくテーブルを使用しようとしています。 gaspはい、表、表は反復列を含む表データを入れる意味的に正しい選択です。もちろん、表データを実行するためのJavascriptの選択肢もたくさんあります。 Flexigrid is a good one worth considering.

Answer 3

あなたが始めるためにSmashingMagazineほぼすべてのグリッドベースのデザインを見つけることができます。

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

そして、ここではあなたが選んだために利用可能なCSSレイアウトがたくさんあります：

http://layouts.ironmyers.com/

Answer 4

テーブル形式のデータを表示しようとしているので、テーブルを実際に使用する必要があります。

<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> 

Answer 5

下に示すように、あなたもそれはそれが何であるかだので、私はかなり、<table> suggetionsに同意する必要がいるのdivのを使用して、同じ方向にそれらをすべて浮動同じことを達成できるが、 。 またはと考えると、おそらく<ol>と考えることができます。

メールの受信トレイにはどのような「クール」なデザインが適しているのかわかりません。そのほとんどがユーザーエクスペリエンスを台無しにしてしまうか、機能的なUIを書き直すだけでは不十分です。また、MVCのコントロールレイヤーでは、ほとんどのリワークがMまたはVではなく変更されると思います。

これはおそらくiTunesの新しいアーティスト/アルバムのプレゼンテーションに似ていますか？しかし、私はそれが悪い考えであることを示唆しなければならないでしょう。

受信トレイを作成すると、私の経験から

Answer 6

、あなたは、必要に応じてその列の幅が動かなくなり、長い件名行を切り捨てる必要があるかなど

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

これは、代わりにWWWWWWWWWW...として件名が表示されます。