CSS的強(qiáng)大之處在于它可以實現(xiàn)許多復(fù)雜的布局效果,包括文字圖片環(huán)繞。該效果可以讓文字圍繞圖片排版,讓排版更加生動形象。
下面的代碼演示了如何使用CSS實現(xiàn)文字圖片環(huán)繞:
<div class="wrap"> <img src="example.jpg" alt="example"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices nunc. Proin cursus lorem eget nulla luctus, eu tempor lorem bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nulla elit, eleifend semper ligula vitae, imperdiet sodales mauris. Ut vel dolor quis leo pretium lacinia vel quis sem. Quisque tempus velit massa, eu bibendum nunc pretium id. Integer dictum tellus non augue accumsan dapibus. Sed tristique justo libero, et consequat est tincidunt a. Nulla facilisi. Fusce tincidunt ut odio eu bibendum. Mauris laoreet sapien in hendrerit mollis. In cursus, augue eget pharetra elementum, mi enim bibendum massa, et aliquet tellus nunc eget lorem. </p> </div> .wrap { display: flex; align-items: center; } img { float: left; margin-right: 10px; }
在上述代碼中,我們使用了一個包含圖片和段落的div容器,并對其設(shè)置了flex布局和垂直居中。接著,我們使用了float屬性將圖片向左浮動,并設(shè)置間距為10像素。這樣段落就可以自動環(huán)繞圖片了。
通過以上CSS屬性的運(yùn)用,我們就可以實現(xiàn)這樣的效果了。