HTML 和 CSS 有助于让 3 个元素像这样响应

Question

我想要 3 个元素排成一行。前两个左对齐，第三个右对齐。当窗口较小时，我希望第二个位于第一个下方，而第三个保留在右侧，当窗口变得更小时，所有三个都在彼此下方。

这是一个例子： https://www.backyardburgers.com/

我想用这三个元素在标题下制作红色的东西，一个 h2 a p 和一个锚点，即按钮。

如果 html 如下，我希望您能告诉我要使用什么 CSS：

<section class="location"> 
<div class="content">
    <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
<a class="button" href="#">Sale sonet</a>
    </div></section>

Answer 1

具有 3 个 div 的示例代码

CSS ::::

div {
    height: 200px;
    width: 200px;
    border: 1px solid white;
    display: inline-block;
}

@media only screen and (max-width: 500px) {
    div {
        width: 100%;
    }
}

@media screen and (max-width: 900px) and (min-width: 500px) {
    div {
        display: block;
    }

   .first, .second {
        width: calc(100% - 200px);
   }

   .third{
        position: fixed;
        top: 8px;
        right: 5px;
        width: 200px;
   } 
}

@media screen and (min-width: 900px) {
   div{
        display: inline-block;
   }

   .first {
        float: left;
   }

   .second {
        width: calc(100% - 410px);
   }

   .third {
        float: right;
   }
}

Answer 2

这是一个简单的转变：

.location {
  background: #d00807;
  color: #fff;
  padding: 20px;
  position: relative;
}
.location h2 {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
}
.location p {
  display: inline-block;
  margin: 0px;
  margin-left: 10px;
  vertical-align: middle;
}
.location a.button {
  background: transparent;
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -20px;
}
@media (max-width:768px) {
  .location h2 {
    display: block;
    margin-bottom: 10px;
  }
  .location p {
    width: 50%;
    margin-left: 0px;
  }
}

<section class="location">
  <div class="content">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
    <a class="button" href="#">Sale sonet</a>
  </div>
</section>