css图片换行

如果你想让 CSS 中的图片跑到下一行，可以使用 `display: block;` 或者 `float: left;`。具体来说，你可以在 CSS 中添加以下代码：

img {
  display: block; /* 图片变成块级元素 */
  /* 或者 */
  float: left; /* 图片浮动到左侧 */
}

这样，当图片的宽度超出了父元素的宽度时，它就会自动跑到下一行，而不是覆盖其他元素。你也可以通过设置 `width` 属性来控制图片的宽度，以避免出现超出父元素的情况。

相关问题

css 图片自动换行

CSS图片自动换行通常是指使用`flexbox`或`grid`布局技术，当一行无法容纳所有图片时，让图片能够自动换到下一行显示。以下是两种常见的方法：

1. **Flexbox**:
- 使用`.flex-wrap: wrap;`属性可以让项目在容器宽度不足以放下所有元素时换到下一行。
- 对包含图片的容器设置`display: flex; justify-content: space-between;`可以使得图片均匀分布在每一行，并在需要时换行。

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

2. **Grid**:
- `display: grid;`将元素放入网格系统，`grid-auto-flow: row;`会让元素按照行的方向自动换行。
- 可以通过调整`grid-template-columns`来控制列宽，当内容超过一列时会开始新的一行。

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 10px;
}

css图片超出自动换行

可以使用CSS的`word-wrap`属性和`overflow-wrap`属性来实现图片超出自动换行的效果。

img {
  max-width: 100%;
  height: auto;
  word-wrap: break-word; /* 兼容旧浏览器 */
  overflow-wrap: break-word; /* 兼容新浏览器 */
}

以上代码中，`max-width`属性和`height`属性用于控制图片的最大宽度和自适应高度。`word-wrap`属性和`overflow-wrap`属性用于控制文本的换行方式，将长单词或URL等超出容器宽度的内容强制换行。

这样，当图片超出父容器宽度时，就会自动换行。