CSS 中的浮動圖像和文字
您需要一種縮圖浮動到文字左側的佈局,同時防止文字環繞圖像。實現此目的的方法如下:
HTML 結構:
<div class="post-container"> <div class="post-thumb"><img src="thumb.jpg" /></div> <div class="post-content"> <div class="post-title">Post title</div> <p>Post description...</p> </div> </div>
CSS 樣式:
.post-container { margin: 20px 20px 0 0; border: 5px solid #333; display: flex; /* Create a flexible layout container */ } .post-thumb { float: left; margin-right: 20px; /* Create some spacing between the thumbnail and text */ } .post-thumb img { display: block; } .post-content { margin-left: auto; /* Push the text to the right side of the container */ } .post-title { font-weight: bold; font-size: 200%; }
透過使用CSS 的display: flex,我們創建了一個靈活的容器,允許post-thumb和 post-content 元素根據需要擴大和縮小。 post-thumb 上的 float: left 和 post-content 上的 margin-left: auto 有助於根據需要定位元素。
以上是CSS中如何防止文字環繞浮動圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!