Question

我在tumblr为我的个人作品集制作了一个自定义主题。

我正在尝试实施此图片。所以我想在tumblr中我可以将ODD中的蓝色帖子和偶数中的蓝色帖子分开。在我的文件中，HTML和CSS工作得很好，但在tumblr中我有点问题。

enter image description here

HTML：

      {block:posts} 

       {block:odd}      
        <div id="main-container" >
        {block:Photo}        
            <div class="post-wrapper">



            <div style="background: url('{PhotoURL-HighRes}') center                 center no-repeat;    width: 250px;
             height: 420px;
             float: left;"></div> 
             </div>
        {/block:Photo} 


        </div>
    {/block:odd} 



    {block:Even} 

         <div id="main-container_bot">
            {block:Photo}      
            <div class="post-wrapper_bot">
                <div style="background: url('{PhotoURL-HighRes}') center 
                center no-repeat;    width: 250px;
                 height: 420px;
                  float: left;"></div> 
            </div>       



            {/block:Photo}      
</div>
    {/block:Even}

     {/block:posts}

CSS：

#main-container {
    background-color:#fff;
    margin-left:422px;
    margin-top:150px;
}

.post-wrapper {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:blue;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

#main-container_bot {
    margin-left:547px;
    margin-top:210px;
    position:absolute;
}

.post-wrapper_bot {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:red;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;     
}

这在tumblr之外工作得很好，但在tumblr中，不起作用。我认为这可能是关于这个＆＃34;位置：绝对的;＆＃34;但我真的不知道如何解决它。请任何人帮我解决这个问题吗？

Answer 1

工作示例

<强> HTML

<div id="content">

  {block:Posts}

    {block:Photo}
      <div class="wrapper-{block:Odd}top{/block:Odd}{block:Even}bot{/block:Even}">
        <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
      </div>
    {/block:Photo}

  {/block:Posts}

</div>

<强> CSS

#content {
  background-color:#fff;
  width: 1000px;
}
.wrapper-top {
  position: absolute;
  width: 250px;
  height: 420px;
  display: inline-block;
  background-color:blue;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.wrapper-bot {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 420px;
  top: 210px;
  left: 125px;
  background-color:red;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#content img {
  height: 420px;
  width: 250px;
}

这是一个JSFiddle来演示。

现在，所有这些说明，如果照片没有HighRes网址，你就会遇到麻烦，而且你必须弄明白如何处理非照片帖。

用ODD和偶数划分tumblr帖子

1 个答案:

工作示例