如何让在一个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，可以让它和图片部分宽度一致。