如何将一个div分成两个平等的部分，一边放多行文字，一边放图片，并且图片部分和多行文字部分高度相同，整个div的宽度和页面宽度相等

可以使用flex布局实现这个效果。具体的实现步骤如下：

1. 给该div添加display: flex; 和flex-wrap: wrap;属性，使内部元素可以使用flex布局，并且超出宽度时自动换行。

2. 给div内部的两个元素（即多行文字和图片）添加flex: 1;属性，使它们平分div的宽度。

3. 给多行文字部分设置height: 100%;，使它和图片部分高度相同。

4. 给图片部分设置object-fit: cover;，使图片可以自适应尺寸并填充整个容器。

代码示例：

<div style="display: flex; flex-wrap: wrap; width: 100%;">
  <div style="flex: 1; height: 100%;">
    <p>多行文字部分</p>
    <p>多行文字部分</p>
    <p>多行文字部分</p>
    <p>多行文字部分</p>
  </div>
  <div style="flex: 1; height: 100%;">
    <img src="图片地址" alt="图片" style="width: 100%; height: 100%; object-fit: cover;">
  </div>
</div>

相关问题

如何将一个div占据整个页面的宽度并且分成两个平等的部分，一边放多行文字，一边放图片，并且两个的高度相同

您可以使用flex布局来实现。

HTML结构：

<div class="container">
  <div class="text">多行文字</div>
  <div class="image"></div>
</div>

CSS样式：

.container {
  display: flex;
  height: 100vh;  /* 占据整个页面高度 */
}

.text {
  flex: 1;  /* 平分宽度 */
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background-color: #f0f0f0;  /* 设置背景颜色 */
}

.image {
  flex: 1;  /* 平分宽度 */
  background-image: url(图片地址);  /* 设置背景图片 */
  background-size: cover;  /* 让图片完全覆盖容器 */
  background-position: center center;  /* 图片居中显示 */
}

这样就可以实现一个占据整个页面宽度的div，其中一边放多行文字，一边放图片，并且两个的高度相同。

如何让在一个div内实现上面部分放图片下面部分的放多行文字

您可以使用CSS的flexbox布局来实现这个效果。

首先，将这个div设置为flex容器，这样就可以控制其内部元素的布局方式。然后将图片和文字分别放在两个子元素中，设置子元素的flex属性为1，使它们平均分配容器的宽度。最后，将文字子元素设置为flex容器，并使用flex-wrap属性控制文字的换行方式。

以下是示例代码：

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="text">
    <p>多行文字</p>
    <p>多行文字</p>
    <p>多行文字</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container img {
  flex: 1;
  max-width: 100%;
}

.container .text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

这个代码将会把图片放在div的上面，文字放在下面，并且文字可以跨越多行。