将两个元素对齐到列内的底部

Question

我在页脚部分的4列中有一行分割，在右边的最后一列中我想添加类似附图的内容，但我想在所有屏幕尺寸上保留图像和文本的外观，我只使用较小的屏幕，屏幕越宽，图像和文本分开太多。我怎样才能做到这一点？

.wrapper {
  position:relative;
  text-align:center;
  margin:0 auto;
}

.footer {
  font-size:40px;
  color:black;
}
.talk {
  position:absolute;
  text-align:left;
  bottom:0;
}

.footer-logo {
  vertical-align: bottom;
  float:right;
  height:150px !important;
}

 <div class="wrapper">
    <p class="footer talk">Big Text</p>
    <img class="footer-logo" src='http://via.placeholder.com/140x100'>
 </div>

Answer 1

您可以尝试使用此代码。 我在html页面中添加了一些媒体查询和一些div

HTML

<div class="wrapper">
   One Columns
 </div>
 <div class="wrapper">
    two Columns
 </div>
  <div class="wrapper">
    three Columns
 </div>
  <div class="wrapper">
  <div class="A">
   <p class="footer talk">Big Text</p>
    <img class="footer-logo" src='http://via.placeholder.com/140x100'>
  </div>

 </div>

CSS

.wrapper {
  position:relative;
  text-align:center;
  margin:0 auto;
width:25%;
float:left;
}

.footer {
  font-size:40px;
  color:black;
}
.talk {
  position:absolute;
  text-align:left;
  width:50%;
  float:left;
}

.footer-logo {
  vertical-align: bottom;
  float:right;
  height:150px !important;
  width:50%;
  float:right;
}

.A{
  width:100%;
}

@media (max-width:525px){
.A{
  width:100%;
}

.footer-logo {

  width:20%;
  float:right;
}

.talk {

width:20%;
float:left;
font-size:28px;
}
}