html - 内容未正确填充 CSS 网格列

Question

我在 wordpress 的静态页面中显示“帖子提要”时遇到了很多麻烦。我制作了一个网格列显示，它根据屏幕大小自动调整列数，但是当它达到特定屏幕大小时，帖子内容不再填充其分配的空间，我不知道如何修复它。

有问题的页面是这样的:https://auroranislands.com/spellbook/air-arcana/

我正在使用这个简单的短代码提取帖子内容:

[display-posts category="Air Arcana" posts_per_page="-1" include_content="true" wrapper="div"]

我用来显示它的 CSS 是这个:

div.display-posts-listing {
	list-style-type: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	column-gap: 15px;
	column-rule: none;
}

div.listing-item {
	clear: both;
	margin: 9px 0;
	overflow: auto;
	list-style: none;
	background-color: lightgray;
}

div.listing-item a.image {
	display: none;
}

div.listing-item a.title {
	display: none;
}

div.listing-item span.excerpt-dash {
	display: none;
}

div.listing-item span.excerpt {
	display: none;
}

如果有人能提供帮助，我将不胜感激!

Answer 1

我查看了您的源代码，您的表格周围似乎有一个带有名为“内容”的类的 div，该 div 将您的表格宽度限制为 67.5%。如果您删除“内容”类或覆盖宽度属性。您的代码应该可以正常工作。 content class restricting the width of table elements