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/

我快速放在一起一點點的演示，使用表的解決方案：http://jsfiddle.net/mikedidthis/v4xdR/