沒有什么特別的，就是用了一下彈性布局

.video-bk {width: 100%;height: 80%;background: #fff;/* 使用彈性布局 flex */display: -webkit-flex; /* Safari */display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between; }.video1, .video2, .video4, .video6, .video9 {align-self: stretch;flex-grow: 1;border: 1px solid #fff;background-color: #000;position: relative; } .video1 {height: 100%; }.video2 {max-width: 49%; }.video4 {min-width: 48%;max-width: 50%;max-height: 50%; } .video6 {width: 33%;max-height: 50%;min-height: 33%; } .video9 {width: 33%;max-height: 33%;min-height: 33%; }

總結

以上是生活随笔為你收集整理的视频九宫格布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。