问题描述
更新前（正确布局）： https://codepen.io/any_formless/pen/WNpLyyj
<html>
<head>
<style type="text/css">
.wrapper {
display: flex !important;
min-height: 100% !important;
flex-direction: column !important;
}
.title {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #f6e39499 !important;
font-weight: 900;
font-size: 9.4vw;
padding-right: 2vw;
padding-left: 2vw;
line-height: 20vw;
color: #f6e394 !important;
background: #0a0e0f;
}
.m-ad {
height: 130.08vw !important;
background: hotpink;
padding:2vw;
}
.client {
height: 130.08vw !important;
text-align: center !important;
display: flex !important;
padding: 8vw;
background: yellow;
}
.wrapper {
background: blue;
transform: scale(0.15);
padding: 5vw;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="client m-ad"><a href="http://x.com"><img src="https://theculturetrip.com/wp-content/uploads/2015/06/screen-shot-2016-09-30-at-1-37-56-pm.png" width="1280px" height="2560" style=" max-width: 100%; height: auto;">
<span class="title">Book Title</span>
</a></div>
<div class="m-ad">
</div>
</div>
</body>
</html>
更新后（布局错误）： https://codepen.io/any_formless/pen/YzZdLMR
<html>
<head>
<style type="text/css">
.wrapper {
display: flex !important;
min-height: 100% !important;
flex-direction: column !important;
}
.title {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #f6e39499 !important;
font-weight: 900;
font-size: 9.4vw;
padding-right: 2vw;
padding-left: 2vw;
line-height: 20vw;
color: #f6e394 !important;
background: #0a0e0f;
}
.m-ad {
height: 130.08vw !important;
background: hotpink;
padding:2vw;
}
.client {
height: 130.08vw !important;
text-align: center !important;
display: flex !important;
padding: 8vw;
background: yellow;
}
.wrapper {
background: blue;
transform: scale(0.15);
padding: 5vw;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="client m-ad"><a href="http://x.com"><img src="https://theculturetrip.com/wp-content/uploads/2015/06/screen-shot-2016-09-30-at-1-37-56-pm.png" width="1280px" height="2560" style=" max-width: 100%; height: auto;">
</a></div>
<span class="title">Book Title</span>
<div class="m-ad">
</div>
</div>
</body>
</html>
变化是从黄色元素和图像链接中删除了跨度。 跨度是通过 WP 后端的“自定义代码”字段添加的，它是书名。
从黄色元素和链接中删除跨度据说是插件更新中的修复，因此不应恢复标记。
我的目标是仅通过使用 CSS 来实现原始布局。
重要的是在修复中粉红色和黄色元素保持相同的高度，并且黑色标题元素将垂直填充所有可用空间，一旦它回到它所属的黄色元素，在书籍封面下，并且书籍封面将保持固定宽度但高度灵活，如有必要，垂直缩小标题字段。我的包装列中有许多黄色和粉红色元素，不仅是 2，而且是可变数字。
在 Codepens 中，我尝试保留所有原始 CSS 和标记，因为这是我的布局所必需的，并且具有固定的高度。
（我只使用变换比例来缩小内容以获得更好的视图，因为书籍封面必须保持高分辨率才能响应，并在页面加载时为浏览器缩小。）
我尝试了浮动和清除元素以及改变定位，但到目前为止没有任何效果。
这个问题有什么解决办法吗？
谢谢！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）