html - Tumblr横版主题锻造

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-horizo​​ntally-scrolling-site/

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