HTML CSS：将flexbox元素彼此相邻

Question

我正在一个项目中，我必须仅使用HTML和CSS创建一个在线书店网页。我想使用下图所示的样式显示商店的“关于我们”信息：

基本上，我想以上面显示的方式放置图像和文本。但是，使用flexbox时，我无法同步图像和文本，因为我难以设置图像宽度以覆盖一半的flex容器，而部分文本覆盖另一半。这是我的代码：

.flex-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  background-color: orange;
  opacity: 0.7;
}

.flex-container>div {
  margin: 0;
  width: 100%;
  height: auto;
}

#fleximg>img {
  width: 60%;
  height: auto;
}

#about {
  width: 50%;
  margin-right: 300px;
  height: auto;
}

<div class="flex-container">

  <div id="fleximg"><img src="https://placehold.it/400x400" alt=d esk/></div>

  <div id="about">
    <!-- text i want to place next to image -->
    <h1> ABOUT US </h1>
    <p>
      In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
      a book at a local bookshop .

    </p>
  </div>

</div>

当我运行页面时，我得到下面的图片，其中图像和文本彼此不相邻，调整尺寸时遇到麻烦

[感谢您在指导我解决问题方面的帮助

Answer 1

您应该将css类的flex-container设置为width：100％，将#fleximg设置为width：50％，将#about设置为width：50％，并使用css中的背景代替img标签。

示例：

.flex-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    background-color: orange;
    opacity: 0.7;
    width: 100%;
    height: auto;
  };

  #fleximg {
    width: 50%;
    height: auto;
    background: url('') center no-repeat;
    background-size: cover;
  };

  #about {
    width: 50%;
    margin-right: 0;
    height: auto;
  };

Answer 2

背景图片

使用背景图像和背景尺寸：封面。

div{
  border: 2px solid black;a
}
.flex-container {
  display: flex;
  background-color: orange;
}

#fleximg{
  flex-basis: 40%;
  background-image: url("https://picsum.photos/1111/1300");
  background-repeat: no-repeat;
  background-size: cover
}
#about {
  flex-basis: 60%;
  padding: 10px 10px;
  display: flex;
  align-items: center; /* align v */
}

<div class="flex-container">
  <div id="fleximg" class="col">
  </div>
  <div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
      <p>
        In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
        a book at a local bookshop .
      </p>

    </div>
  </div>

</div>

按图像元素

[不对左列使用background-image，则此想法更“棘手”。

对于img元素-一种想法/解决方案是使用此“技巧”：https://css-tricks.com/aspect-ratio-boxes/

将image col“父”位置设置为relative并放入绝对图像（100％宽度/高度+对象适合度：封面）。

div{
  border: 2px solid black;

}
.flex-container {
  display: flex;
  background-color: orange;
  
}

#fleximg{
  flex-basis: 40%;
  top-padding: 100%;
  position: relative;
  overflow: hidden;
}

#fleximg > img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover ;
}

#about {
  flex-basis: 60%;
  padding: 100px 10px;
  display: flex;
  
  align-items: center; /* align v */
  height: auto;
}

<div class="flex-container">
  <div id="fleximg" class="col">
    <img src="https://placehold.it/400x400" alt=d esk/>
  </div>
<div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
      <p>
        In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
        a book at a local bookshop .

      </p>
    </div>
  </div>

</div>

重要：从设计方面看-没有适合所有情况的魔术解决方案。它还取决于您放置在右侧“内容”列中的内容（文本/图像等的amount）和屏幕的宽度（最小宽度/高度/填充/边距和媒体查询对她有用） ）。