CSS新聞文字圖片并排的處理方式是研發(fā)過程中廣泛使用的技術(shù)手段之一。
.news { display: flex; flex-wrap: wrap; justify-content: space-between; } .news .text { flex-basis: 50%; padding: 20px; box-sizing: border-box; } .news .image { flex-basis: 45%; height: 300px; margin: 25px 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
以上CSS代碼就是一個簡單的并排處理方案。可以通過給兩邊容器設(shè)置flex-basis來設(shè)置內(nèi)容寬度,再通過圖片大小和margin來控制圖片的展示效果。
通過這種方式,新聞頁面的排版不僅可以增加美觀性,同時也能提高用戶體驗,讓新聞內(nèi)容更容易被理解和傳遞。