[分享]css中字体在图片右边的代码

CSS中字体在图片右边的代码可以通过text-align和float两种方式来实现。

/* text-align方式 */
.img-font {
  text-align: left;
}

.img-font img {
  float: left;
  margin-right: 10px;
  width: 100px; /* 图片宽度 */
}

/* float方式 */
.img-font {
  overflow: hidden; /* 清除浮动 */
}

.img-font img {
  float: left;
  margin-right: 10px;
  width: 100px; /* 图片宽度 */
}

.img-font p {
  float: left;
  width: calc(100% - 110px); /* p标签宽度 */
} 

以上代码中，我们首先为图片设置了一个float:left，将其向左浮动，并在图片右边留出10px的间距。对于text-align方式，我们则通过为父元素.text-align:left设置来居左对齐

下方的文本。而对于float方式，则需要再次为父元素设置overflow:hidden来清除浮动，同时需要为包含文本的p标签设置float:left，并通过calc函数计算出其宽度为剩余空间的100%。这样，我们就能够成功实现在图片右边插入字体了。