css中图片怎么左右摆放

以下是介绍如何在CSS中设置图片左右摆放的文章：

当我们在网页中插入一张图片时，通常会希望把它与其他内容搭配在一起，让网页看起来更加美观。CSS提供了多种设置图片位置的方法，其中左右摆放就是最常见的一种。下面将介绍两种方法来实现这一效果。

1. 使用float属性

img {
  float: left; /* 或 right */
  margin-right: 10px; /* 可选 */
}

通过设置图片的float属性来实现左右摆放。设置为left时，图片会被挤到左边，允许文本或其他元素位于其右侧；设置为right时，则会被挤到右边，让其他元素位于其左侧。margin-right属性用于设置图片与其他元素的距离。

2. 使用flexBox布局

.container {
  display: flex;
  flex-direction: row; /* 或 column */
  align-items: center;
}

img {
  order: 1; /* 或 2 */
  margin-right: 10px; /* 可选 */
}

flexBox是CSS3新增的一种布局方式，可以方便地实现复杂布局效果。通过设置父元素的display为flex，子元素的order属性可以控制它们在父容器中的位置，1表示在左边或上面，2表示在右边或下面。align-items属性可以控制父容器中子元素的垂直对齐方式。flex-direction属性用于控制子元素的摆放方向。

无论你使用哪种方式，都可以在CSS中轻松设置图片的左右摆放效果，帮助你打造出更有品味的网页。