创建上面的页脚- css/html

Question

我需要一些CSS的帮助。我试图在页脚上方创建一个条纹，在那里，我在桌面上有左边的图像，旁边的文本，然后右边的表单输入字段和按钮。我已经附上了当前桌面外观的问题是，我希望文本旁边的图像垂直在中间和表单字段在右边更多。

当前桌面：

​

​

对于移动:我希望文本显示在图像的旁边(可以分成两行)，它们的表单字段向上移动，所以它在图像和文本下面。

流动电话：

​

​

有人能帮上忙吗？

HTML：

<div id="text-5">

    <div class="left_footer_strip"><img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" alt="Join Balance"/></div>
    
    <p class="middle_footer_strip">Join Balance and get 20% off your first order</p>
    
    //form fields
    <div class="klaviyo-form-Re6W9v right_footer_strip"></div>

</div>

CSS：

/页脚/

#text-5{
    width:100% !important;
}

.footer_wrap_inner > .content_wrap{
    width:100% !important;
}

.left_footer_strip,
.middle_footer_strip{
    float:left;
}

.left_footer_strip{
    padding-right:20px;
}

.middle_footer_strip{
    font-size:24px !important;
}

Answer 1

您可以使用CSS Flexbox：

​

#text-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2em;
}
#text-5 > * {
  flex-basis: 40%;
}
.form {
  display: flex;
}

@media screen and (min-width: 1000px) {
  #text-5 {
    flex-wrap: nowrap;
  }
}

<div id="text-5">
  <img 
    src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" 
    alt="Join Balance" 
  />
  <p>Join Balance and get 20% off your first order</p>
  <form class="form">
    <input type="text" value="Enter first name" />
    <input type="email" value="Enter email" />
    <input type="submit" value="SUBMIT" />
  </form>
</div>

​