保持按钮不与CSS中的文本重叠？

Question

我在Wordpress网站上工作，对于任何类型的网页设计来说都是相当新的。

我有一个预先定义的模块，其中包含多个列，每个列都有一个由标题，文本摘录（长度为一定数量的单词）组成的框以及该文本正下方的按钮摘抄。由于可变字长，该模块的标准版本对于每个看起来很愚蠢的框都有不同的高度。

我想让所有的盒子都达到相同的高度，并将按钮设置在盒子底部附近的中心位置。在尝试通过将按钮设置为固定位置来实现这一点之后，我非常讨厌微调，我意识到我也可以在文本摘录上设置一个固定的高度并控制按钮的位置。

可悲的是，它仍然没有按照我想要的方式工作。它在标准视图中看起来很棒但是一旦我使浏览器窗口变小，我给它设置高度的余地变得太小（我将高度设置为8em）并且按钮开始与文本重叠。由于这是插件中的预定义模块，我无法改变其生成方式，我唯一可以改变的是添加自定义CSS规则。

图片：

我之前听过一些叫做明确修复的东西，但是当我用谷歌搜索它们时，看起来它们似乎只是保留元素从左边或右边不是从上面拍摄。我不想为使用@media和屏幕宽度的每个元素添加一大堆CSS规则，我宁愿采用一些聪明的方法来做到这一点。有吗？

非常感谢您的阅读！

Answer 1

您可能需要使用flexbox，我希望这可以让您了解如何根据需要对其进行修改。

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
  align-items:flex-end;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:1 0 250px;
  min-width:250px;
  max-width:300px;
  background:white;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.thing h3{
text-align:center;
color:red;
}

.thing small{
margin:5px;
display:block;
height:150px;
overflow-y:hidden;
}

.thing button{
margin-top:10px;
background:red;
border:2px solid white;
border-radius:5px;
flex:1 0 30px;
min-width:50px;
max-width:80px;
color:white;
height:30px;
}

<div class="things">
  <div class="thing">
    <h3>AABCDEH</h3>
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
    <button>BUTTON</button>
  </div>
  <div class="thing">
    <h3>AABCDEH</h3>
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat., sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</small>
    <button>BUTTON</button>
  </div>
  <div class="thing">
    <h3>AABCDEH</h3>
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
    <button>BUTTON</button>
  </div>
  <div class="thing">
    <h3>AABCDEH</h3>
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
    <button>BUTTON</button>
  </div>
  
</div>

Answer 2

这里只有几个选项：

我认为使用wp_trim_words（）的方法之一就是使用wp_trim_words（）：

<?php
echo wp_trim_words( get_the_content(), 40, '...' );
?>

Source

但如果你真的无法真正访问那么远（你至少可以阅读在页面中放置框的代码吗？），那么一定要尝试一下媒体查询可能会帮助你做到更好，更安全。

HTH！