时间戳

首页 > 解决方案 > 标记更改后将 span 移回其原始位置，仅使用 CSS

html - 标记更改后将 span 移回其原始位置，仅使用 CSS

问题描述

在插件开发人员在更新中更改标记后，我面临挑战。

更新前（正确布局）： 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 和标记，因为这是我的布局所必需的，具有固定的高度。

（我只使用变换比例来缩小事物以获得更好的视图，因为书籍封面必须保持高分辨率以实现响应性，并在页面加载时为浏览器缩小。）

我尝试了浮动和清除元素并更改位置，但到目前为止没有任何效果。

这个问题有什么解决办法吗？

谢谢！

标签： htmlcsscss-floatcss-positionmarkup

解决方案

推荐阅读