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-horizontally-scrolling-site/

I quickly放了一个小演示，使用表解决方案：http://jsfiddle.net/mikedidthis/v4xdR/