Html 尝试创建多个列

这个问题相当基本。我无法将一个单栏主题转换为两栏主题。通常可以通过增加#条目的宽度（用于.posts的容器）来实现，但在这种情况下不起作用。有什么想法吗

CSS

不管容器有多宽，由于某种原因，这些柱子都不能扩展到一根柱子以外。我试着插入float:left，但不同大小的帖子会从顶部完全齐平（我选择网格样式）。希望这有点道理

<div id="entries">
{block:Posts}
<div class="posts">

{block:Photo}
{LinkOpenTag}
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="postpic"/>
</a>
{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
{block:Photos}
<a href="{Permalink}" title="{NoteCountWithLabel}">
<img src="{PhotoURL-250}"></a>
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}

</div>
{/block:Posts}

{block:PostNotes}
<div class="ending">{PostNotes}</div>
{/block:PostNotes}
</div>

{block:Posts}
{块：照片}
{LinkOpenTag}
{LinkCloseTag}
{/block:Photo}
{块：Photoset}
{block:IndexPage}
{块：照片}
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}
{/block:Posts}
{block:PostNotes}
{附注}
{/block:PostNotes}

我想你想要两个

帖子，在
#条目的旁边，对吗？
使用浮动
；但就像你说的，你在身高上会有不想要的行为<代码>内联块

s可能是一种解决方案。或者只需清除每一个奇数浮点，因此每1/3/etc都在一个新行上。 或使用Flexbox使立柱1和2的高度相同。

---

我想你想要两个

帖子，在
#条目中相邻，对吗？
使用浮动
；但就像你说的，你在身高上会有不想要的行为<代码>内联块

s可能是一种解决方案。或者只需清除每一个奇数浮点，因此每1/3/etc都在一个新行上。 或使用Flexbox使立柱1和2的高度相同。

---

您应该使用

%

如果要保留填充，请尝试将其作为CSS标记：

.posts {
    width: calc(50% - 20px) /*20px for the 10px padding on each side*/ 
    padding: 10px;
    background: transparent; 
}

---

您应该使用

%

如果要保留填充，请尝试将其作为CSS标记：

.posts {
    width: calc(50% - 20px) /*20px for the 10px padding on each side*/ 
    padding: 10px;
    background: transparent; 
}

---

首先，从.posts类中删除widt属性：

.posts {
  padding: 10px;
  background: transparent;
} 

其次，在css标记中添加另一个条目：

.posts div {
  display:inline-block;
}

---

这将允许您在给定的帖子宽度内自动对齐尽可能多的项目。

首先，从.posts类中删除widt属性：

.posts {
  padding: 10px;
  background: transparent;
} 

其次，在css标记中添加另一个条目：

.posts div {
  display:inline-block;
}

---

这将允许您在给定的文章宽度内自动对齐尽可能多的项目。

您需要使用jQuery插件，使您的文章对齐到网格系统中。一、 还有许多其他tumblr主题制作者也在使用，但也有其他插件

如果您对jQuery插件有点熟悉，那么这非常简单。您需要一个容器（#entries）和一个用于帖子的类，我称它们为“entry”。然后添加砖石代码

我编辑了你的JSFIDLE：

这只是基础知识，您可以在web页面上阅读所有选项

tumblr标记：

<div id="entries">
{block:Posts}
<div class="entry">

{block:Photo}
{LinkOpenTag}
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="postpic"/>
</a>
{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
{block:Photos}
<a href="{Permalink}" title="{NoteCountWithLabel}">
<img src="{PhotoURL-250}"></a>
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}

</div>
{/block:Posts}

{block:PostNotes}
<div class="ending">{PostNotes}</div>
{/block:PostNotes}
</div>

{block:Posts}
{块：照片}
{LinkOpenTag}
{LinkCloseTag}
{/block:Photo}
{块：Photoset}
{block:IndexPage}
{块：照片}
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}
{/block:Posts}
{block:PostNotes}
{附注}
{/block:PostNotes}

根据需要的列数，可以更改容器元素的宽度#条目

---

祝你好运

您需要使用jQuery插件，使您的帖子与网格系统对齐。一、 还有许多其他tumblr主题制作者也在使用，但也有其他插件

如果您对jQuery插件有点熟悉，那么这非常简单。您需要一个容器（#entries）和一个用于帖子的类，我称它们为“entry”。然后添加砖石代码

我编辑了你的JSFIDLE：

这只是基础知识，您可以在web页面上阅读所有选项

tumblr标记：

<div id="entries">
{block:Posts}
<div class="entry">

{block:Photo}
{LinkOpenTag}
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="postpic"/>
</a>
{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
{block:Photos}
<a href="{Permalink}" title="{NoteCountWithLabel}">
<img src="{PhotoURL-250}"></a>
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}

</div>
{/block:Posts}

{block:PostNotes}
<div class="ending">{PostNotes}</div>
{/block:PostNotes}
</div>

{block:Posts}
{块：照片}
{LinkOpenTag}
{LinkCloseTag}
{/block:Photo}
{块：Photoset}
{block:IndexPage}
{块：照片}
{/block:Photos}
{/block:IndexPage}
{/block:Photoset}
{/block:Posts}
{block:PostNotes}
{附注}
{/block:PostNotes}

根据需要的列数，可以更改容器元素的宽度#条目

---

祝你好运

同时发布HTML标记，理想情况下创建一个或类似的东西，提供一个实例，让我们更容易测试。@Auburn您有不正确的HTML标记。每页只允许您使用一个唯一ID。@Auburn您的标记仍然错误！您不能有多个ID相同的元素。好吗？同时发布您的HTML标记，理想情况下创建一个或类似的内容，以提供一个实例，使我们更容易测试。@Auburn您有不正确的HTML标记。每页只允许您使用一个唯一ID。@Auburn您的标记仍然错误！您不能有多个具有相同ID的元素。好吗？谢谢您的回复！不幸的是，这给我带来了与我尝试实现float属性时相同的问题。除了现在，图像从底部而不是顶部齐平。好的，当我看到你的小提琴时，我才意识到（至少部分）你的问题。您正在将.posts包装设置为width:250px，即内部元素的对齐宽度不能超过250px，即使外部包装更宽。我想我不能在这里添加代码，所以我将在下面添加另一个条目。：）谢谢你的回复！不幸的是，这给我带来了与我尝试实现float属性时相同的问题。除了现在，图像从底部而不是顶部齐平。好的，当我看到你的小提琴时，我才意识到（至少部分）你的问题。您正在将.posts包装设置为width:250px，即内部元素的对齐宽度不能超过250px，即使外部包装更宽。我想我不能在这里添加代码，所以我将在下面添加另一个条目。：）无论出于什么原因，内联块似乎都不起作用。但是，我如何在代码中实现clear呢？

.posts:nth child（奇数）{clear:both；

有效吗？

.posts:nth child