在網站設計中,經常會遇到需要在圖片左邊展示文字的情況。這時候,我們可以使用CSS來實現。下面是實現的代碼:
.container { display: flex; align-items: center; } .img { flex: 1; } .text { flex: 1; padding: 0 20px; }
首先,我們將圖片和文字都放在一個容器中,這里我們使用了Flex布局來讓它們在同一行中,并且垂直居中對齊。
然后,我們設置圖片的flex值為1,讓它占據容器中剩余空間的全部。而文字的flex值也為1,這樣它就會和圖片平分容器中的空間。
在文字的樣式中,我們還設置了padding值來控制文字和圖片之間的距離。這里的20px只是個示例,你可以根據實際情況來調整。
使用這種方式可以很方便地實現圖片左邊文字右邊的效果,而且代碼簡潔易懂,不需要復雜的布局技巧。當然,如果你想做更多的定制化,還可以使用其他CSS屬性來精細調整樣式。
下一篇css 圖片居右顯示