wordpress - List 元素的动态高度带来总混沌

Question

我想要一些通过 css 动态调整高度的列表元素。

为了更好地理解:我通过 ::before 插入一个数字，我通过 counter-increment 计算(这是大数字)

问题是，到目前为止，我所做的一切都没有让我接近我想要归档的东西。如果你改变窗口大小，一切都会被推倒......

它应该是这样的:

我试过:

clear: both; on every element (except the li)
height: auto; on every element 

我已经通读了一些帖子，但对我来说没有什么真正有用。

不要问我为什么要尝试用 css 来完成它...;)感谢您的帮助!

Answer 1

你的图像和缩略图包装器有一个绝对定位，这会导致巨大的问题，请看下面调整后的 CSS:

.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
 position: relative;
 clear: both;
}
.page-id-3606 .product_thumbnail a::before {
 counter-increment: section;
 content: "0" counter(section) "";
 font-size: 10em;
 font-weight: bold;
 position: relative;
 /* top: 100px; */
 /* left: 50%; */
 line-height: 0;
 height: 100px;
 width: 100%;
 text-align: center !important;
 box-sizing: border-box !important;
 text-transform: uppercase;
 color: #464646;
 display: block !important;
 border-bottom: 3px solid #464646;
 /* transform: translate(-50%, 0); */
 margin: 0 !important;
 z-index: 10 !important;
}