html - 文本旁边的图像(响应式)

Question

我制作了一个部分，左侧是图像，右侧是文本，在我更改浏览器宽度或高度之前它看起来不错。一切都出错了，

这是我改变宽度之前的样子:

之后:

我试图实现的目标如下所示: 我想在小屏幕上实现的目标(相同的想法，而不是相同的照片和文字)

这是我的代码: https://jsfiddle.net/a6ktx5zv/

      <!-- About US -->

  <section class="about-us">
    <div class="about-us-img">
      <img src="https://samikamal.github.io/Wild-Tiger-Restaurant/images/about-us.jpg" alt="">
    </div>

    <div class="about-us-text">
      <h2>Our Story</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam, ipsum quis pharetra suscipit, <br> <br>  elit mi accumsan nisi, quis mollis mauris nisi nec augue. Sed molestie turpis efficitur gravida iaculis. Quisque tempor, nunc et tincidunt ultricies, nunc metus semper sapien, ut aliquet lorem mi id nisi. Duis luctus dui odio, et mattis ligula porta eu.</p>

    </div>
  </section>

/* About-Us */

CSS:

.about-us{
    height: 90vh;
    width: 100%;

}

.about-us-img{
    max-width: 50%;;
    height: 100%;
    overflow: hidden;


}
.about-us-img img{
    max-width: 100%; 
    display:block; 
    height: auto;
}
.about-us-text{
    max-width: 736px;
    text-align: center;
    margin-top: -47em;
    margin-right: 10em;
    float: right;
}

.about-us-text p{
    font-size: 2rem;
    line-height: 1.5
}


<!-- Meals Photo's -->

Answer 1

使用 padding 和 margin 来创建布局并不是最好的主意。您应该研究 bootstrap 和 flex-box 来进行布局。创建布局后，填充和边距用于进行微小的调整。就此问题而言，您可以使用 flexbox 解决此问题。

用答案中的类替换你的两个类:

.about-us{
    height: 90vh;
    width: 100%;
    display: flex;        
 }
.about-us-text{
    max-width: 736px;
    text-align: center;
    float: right;
}

如果您需要更多帮助，请在评论中告诉我。