CSS中的文本环绕技术使得我们可以让文字围绕在图片周围,大大提高了网页布局的灵活性和美观程度。下面是一些让文字环绕图片的CSS代码示例。使用float属性我们可以使用float属性让图片左浮动或右浮动
css img { float: left; /*或者是right*/ margin-right: 20px; }
html <p> <img src="example.jpg" alt="example"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur. </p>
css img { float: left; /*或者是right*/ shape-outside: circle(50%); }
html <p> <img src="example.jpg" alt="example"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur. </p>
css img { position: absolute; right: 20px; top: 20px; z-index: -1; }
html <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur. </p> <img src="example.jpg" alt="example">
粉丝
0
关注
0
收藏
0