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

Question

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

为了更好地理解： 我通过 ::before 插入一个我通过 counter-increment 计数的数字（就是大的）

问题是到目前为止我尝试的任何事情都没有让我接近我想要存档的东西。如果你改变 window 大小，一切都会被铲掉...

它应该是这样的：

我试过了：

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

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

Dynamical height of List element brings total Chaos

css

wordpress

height

dynamic