Question

我试图使用内联块来制作网格式Tumblr主题，但是有一些......并发症。这些帖子会自动垂直对齐。如果它们具有相同的尺寸，那么这不会成为问题，但是不同高度之间的帖子会有所不同。总而言之，我希望创建两列不同高度的帖子，这些帖子没有任何垂直对齐方式。我尝试了许多不同的解决方案，但似乎没有任何效果。

第一个链接是JSFIDDLE。

This is how it currently looks与how I would like it to look.

CSS

#entries {
width: 600px;
{block:PermalinkPage}width: 630px;{/block:PermalinkPage}
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
}

.posts {
position: relative;
text-align: left;
background: {color:Posts}; 
width: 250px;
{block:PermalinkPage}width: 500px;{/block:PermalinkPage}
margin: 20px;
padding: 0px; 
word-wrap: break-word;
display: inline-block;
clear: right;
}

.posts nth-child(even) {
float: right;
}

任何提示或可能的选择都会很棒，因为我不能为我的生活弄明白这一点。我开始认为垂直对齐只是内联块固有的？

Answer 1

只有css很难但你可以使用javascript插件 gridalicious 这里是github的链接https://github.com/suprb/Grid-A-Licious

<div id="container">
    <div class="item">
        <img src="../">
        <p>Text </p>
    </div>
<div>

这是一个示例http://jsfiddle.net/wqfoku85/

使用内联块创建网格样式的Tumblr主题？

1 个答案: