在網頁設計中,有時需要將一行中的元素控制為4個。這可以通過CSS來實現。下面是示例代碼:
.container { display: flex; flex-wrap: wrap; } .item { width: 25%; } @media (max-width: 768px) { .item { width: 50%; } }
首先,將包含元素的父容器設為flex布局,并設置flex-wrap為wrap,這樣元素會自動換行。然后,為每個元素設置寬度為25%,即每行顯示4個。當窗口尺寸小于768px時,使用媒體查詢@media,將寬度改為50%,以適應屏幕的大小。
使用CSS控制一行顯示4個元素,可以有效地優化頁面的布局,提升用戶體驗。
上一篇css控制p標簽居底
下一篇css控制九宮格