Question

我对CSS完全不熟悉。但我正在写一个邮箱收件箱，它就像你的典型电子邮件收件箱一样，包含3个From，Subject，Received列。

我可以获得一些基本的CSS来正确格式化这些数据（对齐，列表等），我可以从中构建。

欢迎任何有趣的设计。

Answer 1

我觉得这是<table>布局实际上是正确布局的少数场景之一。您可以考虑使用浮动div来执行此样式布局，但实际上您显示的是table数据，这是唯一有效使用<table>标记的剩余部分。这也为您提供了均匀间隔列的好处。

Answer 2

您可以在SmashingMagazine找到几乎所有基于网格的设计，以帮助您入门：

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

这里有很多可供您选择的CSS布局：

http://layouts.ironmyers.com/

Answer 3

您正在尝试显示表格数据，因此应该使用表格。

虽然您也可以使用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>

Answer 4

以下是我信任的三个列布局：

http://www.alistapart.com/articles/holygrail
http://designshack.co.uk/gallery/layout/3column/（这个有一些灵感的例子）
http://matthewjamestaylor.com/blog/perfect-3-column.htm

老实说，虽然这些“可以”起作用，但你可能希望使用一张桌子。 gasp 是的，一个表，一个表是在语义上最正确的选择，用于将表格数据放入重复列中。当然，还有很多Javascript选项可用于制作表格数据。 Flexigrid is a good one worth considering.

Answer 5

我几乎不得不同意<table>建议，因为它就是这样。或你可以认为它是<ol>，也许。

我不确定什么样的“酷”设计适合电子邮件收件箱，因为大多数设备会搞砸用户体验，或者我只是不够明亮，无法重新设计功能性UI。另外我认为大多数reworks会在MVC的控制层中发生变化，而不是M或V.

话虽如此......或许类似于iTunes的新艺术家/专辑的演示可能有用吗？但我不得不建议这是一个坏主意。

Answer 6

根据我创建收件箱的经验，您应该根据需要截断长主题行，以便不会移动列宽等等。

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

这会将主题显示为WWWWWWWWWW...。

邮件收件箱的CSS

6 个答案: