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

Question

我希望有一些列表元素通过css动态调整高度。

为了更好地理解：我通过 :: before 插入一个我通过计数器增加计算的数字（这就是大数字）

问题是到目前为止我尝试过的任何东西都让我接近我想要存档的内容。如果你改变窗户大小，一切都会被打倒......

它应该是这样的：

我试过了：

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;
}

Answer 2

我在Rich的帮助下解决了这个问题。

缺少的高度和顶部造成了麻烦：

.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}