Question

我从零开始构建Tumblr主题，并希望将其设置为水平可滚动主题。

我为我的帖子创建了那么多的栏目，但是从现在开始我不能弯曲它们而不是垂直放置。

请帮我提供想法和修补程序，因为我是初学者。

网站：http://geniusite.tumblr.com/ 完整代码：http://pastebin.com/Wdw7vp2v

Answer 1

HTML的结构化方式使其成为一种非常难以实现的布局。

理想情况下，您需要分组与每个帖子相关的所有元素（照片，标题等）。根据您当前的代码，这将更合适：

{block:Posts}
<div class="post">
{block:Photo}
    <div class="left">
        <img src="{PhotoURL-HighRes}" width="800px" height="495" alt="{PhotoAlt}"/>
    </div>
    <div class="right">
    {block:Caption}
        {Caption}
    {/block:Caption}
    </div>
{/block:Photo}
</div>
{/block:Posts}

至于实现布局，似乎使用display:table / table-row / table-cell是解决方案的最佳选择（它不需要任何固定的宽度，javascript等）。您可以阅读有关水平布局的各种解决方案的更多信息：http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

我快速使用表格解决方案整理了一个小小的演示：http://jsfiddle.net/mikedidthis/v4xdR/

Tumblr水平主题锻造

1 个答案: