CSS中字体在图片右边的代码可以通过text-align和float两种方式来实现。/* text-align方式 */ .img-font { text-align: left; } .img-fo
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%。这样,我们就能够成功实现在图片右边插入字体了。
粉丝
0
关注
0
收藏
0