[分享]css中左边是图片右边是文字

在网站设计中，将图片和文字结合起来是非常常见的。在CSS中，可以使用float属性实现左侧图片右侧文字的布局。img { float: left; / 设置图片的宽度和高度 / width: 200p...

在网站设计中，将图片和文字结合起来是非常常见的。在CSS中，可以使用float属性实现左侧图片右侧文字的布局。

img {
  float: left;
  /* 设置图片的宽度和高度 */
  width: 200px;
  height: 200px;
  /* 设置图片与文字的间距 */
  margin-right: 20px;
}

p {
  /* 设置文字的宽度 */
  width: 320px;
  /* 使用overflow属性可以防止文字溢出 */
  overflow: hidden;
  /* 使用text-overflow属性可以在溢出时添加省略号 */
  text-overflow: ellipsis;
}

/* 清除浮动 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 

以上代码中，首先设置图片的宽度和高度，并使用float:left将其左浮动，使得文字能够显示在图片的右侧。接着使用margin-right属性设置图片与文字的间距，避免它们过于拥挤。接下来在p标签中设置文字的宽度，并使用overflow:hidden和text-overflow:ellipsis属性防止文字溢出，并在溢出时添加省略号。最后，添加一个clearfix的class清除浮动，以免对其他元素造成影响。

这种左侧图片右侧文字的布局方式适用于多种场景，例如网站的产品展示、新闻报道等。