文本旁边的图像（响应式）答案

【问题标题】：Image beside text (Responsive)文本旁边的图像（响应式）
【发布时间】：2019-06-29 17:30:34
【问题描述】：

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

这是我更改宽度之前的样子：

之后：

我试图实现的目标如下所示：我想在小屏幕上实现什么（相同的想法，不同的照片和文字）

      <!-- 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 -->

【问题讨论】：

标签： html image css responsive

【解决方案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;
}

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

【讨论】：