如何在CSS中创建左侧图像和右侧文本的布局

Question

如何创建类似于这张图片的布局:左边是https://i.stack.imgur.com/RYAuA.png图像，右边是文本。有反应。请帮助我，非常感谢。

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div className="brand_story_body w-75 d-flex m-auto justify-content-between">

                           <div className="brand_story_description text-start">
                             
                                           <div className="w-50">
                                           <img className="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png"/>
                                           </div>
                                      
                                           <div className="w-50">
                                           <p>
How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes
                                            </p>
                              <button className="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">
                                SEE MORE
                             </button>
                                           </div>
                             
                               
                              
                           </div>
                        </div>

​

Answer 1

你可以试试这个，希望能帮上忙。

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body w-75 d-flex m-auto justify-content-between">

<div class="container-md mt-3">
  <div class="row">
    <div class="col-6 p-0 m-0  border">
      <div class="w-100" style="overflow: hidden; width: 100%; height: 100%">
        <img class="w-100 h-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
      </div>
    </div>
    <div class="col-6 border p-3">
      <p>How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes</p>
      <button class="btn btn-outline-dark w-50">
          SEE&nbsp;MORE
       </button>
    </div>
  </div>
</div>
<br><br><br>

​

Answer 2

这是一个有用的例子：

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body">
  <div class="brand_story_description">
    <div class="row">
      <div class="col">
        <img class="img-responsive w-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
      </div>
      <div class="col col d-flex flex-column justify-content-center">
        <p>How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes </p>
        <button class="btn btn-outline-dark rounded-0 border-3 w-25">
          SEE MORE
        </button>
      </div>
    </div>
  </div>
</div>

​

Answer 3

简单地使用Flexbox或Grid。在下面的示例中，我使用了Flexbox。你可以找到一个很好的解释这里

​

.brand_story_description {
  display: flex;
  flex-wrap: wrap;
}

.brand_story_description .w-50 {
  flex: 0 1 50%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body w-75 d-flex m-auto justify-content-between">

  <div class="brand_story_description text-start">

    <div class="w-50">
      <img class="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
    </div>

    <div class="w-50">
      <p>
        How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes
      </p>
      <button class="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">
                                SEE MORE
                             </button>
    </div>



  </div>
</div>

​