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 class flex-container is width: 100% and #fleximg is width:50%, #about is 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

首先，如果图像高度高于右列内容 - 即使是简单的 width: 100%; height: auto image 也可以工作。

div{
  border: 2px solid black;
}

#fleximg img{
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.flex-container {
  display: flex;
  background-color: orange;
}

#fleximg{
  flex-basis: 40%;
}

#about {
  flex-basis: 60%;
  display: flex;
  align-items: center; /* align v */
}

<div class="flex-container">
  <div id="fleximg" class="col">
    tall image
    <img src="https://placehold.it/400x700" alt=d esk/>
  </div>

  <div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
     
    </div>
  </div>

</div>

但上面的想法对动态网站的用处不大。 更具响应性的方法：

按背景图片

对于“left-col”使用背景图片和background-size: cover。

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: 100px 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 作为left-col，这个想法会更加“棘手”。

对于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;
}

#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 */
}

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

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