文字旁边的图片（自适应）

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

使用填充和边距创建布局不是最好的主意。您应该查看bootstrap和flex-box进行布局。创建布局后，可使用填充和边距进行微调。就此问题而言，您可以使用flexbox解决此问题。

用答案中的两个替换您的两个类：

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

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