CSS的強大之處在于它可以實現許多復雜的布局效果,包括文字圖片環繞。該效果可以讓文字圍繞圖片排版,讓排版更加生動形象。
下面的代碼演示了如何使用CSS實現文字圖片環繞:
<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容器,并對其設置了flex布局和垂直居中。接著,我們使用了float屬性將圖片向左浮動,并設置間距為10像素。這樣段落就可以自動環繞圖片了。
通過以上CSS屬性的運用,我們就可以實現這樣的效果了。
上一篇css實現淘寶商品模板
下一篇css實現彈窗縮放效果