Question

我不知道这是太明显的问题还是太抽象，但这几天我看到了一个非常有趣的布局。这是一个WebMail系统，有3列：

第一个占据我屏幕的20％并且包含我帐户的文件夹（收件箱，垃圾邮件等等）。

第二个占据屏幕的30％，包含文件夹内的消息列表。

和第三个占据屏幕的50％，带有消息内容...

好吧，在我的电脑上没有什么有趣的，但是当我在手机上看到它时，这反应惊人。每次我只看到一列，完全适合我的屏幕宽度，一旦我点击某个文件夹，它会水平滚动到下一列，我选择一条消息，然后滚动消息内容......我正在看谷歌并尝试在bootstrap或jQuery上找到要做的事情，但我没有找到任何东西。我找到的最好的是RainLoop WebMail，其设计显然与此类似。有人知道jQuery的bootstrap是否支持这种布局？我应该如何继续实现这样的目标呢？

很抱歉缺少代码，但我不知道该怎么做。

Screenshots of RainLoop layout

Answer 1

我不确定我是否完全理解这个问题，但我会尝试解释我认为你想做什么。

我的理解是，您希望在平板电脑/ PC上分成3列的内容就像移动设备上的“滑块”一样。我假设您知道如何创建填满整个屏幕的东西。如果没有，您将需要查看用于实现此目的的引导框架，或者仅使用带有媒体查询的宽度属性。

下一步只是偏移内容的“框”，然后使用jQuery

    $(".mail-folder-item-1").on("click",function(){

  $("#mail-list").slideLeft(300);
  $("#mail-folder").slideLeft(300);


});

这会将您的文件夹内容向左滑动，将您的邮件列表向左滑动到视图中。如前所述，您必须使用适当的方法（css / jQuery）初始地抵消邮件列表框。

最后，你需要能够理解点击内容的东西，并且可以在列表中找到，根据我的说法，应该在后端（服务器端）完成。这是因为它有很多逻辑，服务器就位于它之上，但我可能错了。

简单地说，如果布局很难，那么在你的发展生涯的这一点上，这可能是一大块咀嚼，但我敦促你尽力而为！希望这有帮助，请回复澄清。

水平滚动布局

1 个答案: