Ковка горизонтальной темы Tumblr

Я начал создавать тему Tumblr с нуля и хотел сделать ее с горизонтальной прокруткой.

Я зашел так далеко, чтобы создать столбцы для своих сообщений, но с этого момента я не могу согнуть их, чтобы они лежали горизонтально, а не вертикально.

Пожалуйста, помогите мне с идеями и исправлениями, так как я новичок.

Сайт: http://geniusite.tumblr.com/ Полный код: http://pastebin.com/Wdw7vp2v


html themes blogs line tumblr
person Hoboway    schedule 07.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

То, как структурирован ваш 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/

person mikedidthis    schedule 08.07.2013