如何让在一个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的上面，文字放在下面，并且文字可以跨越多行。

相关问题

如何让在一个div内实现上面部分放图片下面部分的放多行文字，并且文字部分和图片部分宽度一致

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

1. 父元素设置为 flex 容器，并且设置 flex-direction 为 column，这样子元素会按照垂直方向排列。

2. 图片元素设置为 flex-shrink: 0，这样图片不会被压缩。

3. 文字部分设置为 flex-grow: 1，让它占据剩余的空间。

4. 父元素和子元素都设置为 box-sizing: border-box，这样 padding 和 border 不会影响宽度计算。

最终代码如下：

<div class="container">
  <img src="your-image-url" alt="your-image-description">
  <div class="text">多行文字</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

img {
  flex-shrink: 0;
  width: 100%;
  height: auto;
}

.text {
  flex-grow: 1;
  padding: 10px;
  box-sizing: border-box;
}
</style>

通过设置图片的宽度为 100% 和高度为 auto，可以保持图片宽度与父元素一致，同时保持图片的比例不变。文字部分设置 padding 和 box-sizing，可以让它和图片部分宽度一致。

如何让一个div竖着分为两个部分，上面放图片，下面放文字，并且图片和文字部分宽度相等

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

1. 给父元素设置 `display: flex; flex-direction: column;`，将其变成纵向的flex容器。

2. 给父元素设置 `height`，以确定整个容器的高度。

3. 给放图片的子元素设置 `flex: 1;`，使其占据剩余的空间。

4. 给放图片的子元素设置 `display: flex; justify-content: center; align-items: center;`，使图片在子元素的中央显示。

5. 给放文字的子元素设置与放图片的子元素相同的样式。

6. 给父元素设置 `overflow: hidden;`，以防止文字超出容器。

示例代码如下：

<div style="display: flex; flex-direction: column; height: 200px; overflow: hidden;">
  <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
    <img src="your-image-url" style="max-width: 100%; max-height: 100%;">
  </div>
  <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
    <p>Your text here</p>
  </div>
</div>

注意：为了让图片和文字部分宽度相等，你可以给 `img` 和 `p` 设置相同的 `max-width`，或者将它们都放到一个相同宽度的容器里。