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

Posted 2023-03-05

【中文标题】文本旁边的图像（响应式）

【英文标题】：Image beside text (Responsive)

【发布时间】：2019-06-29 17:30:34

【问题描述】：

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

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

之后：

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

这是我的代码： 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" >
    </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 -->

【参考方案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 中告诉我。