水平平鋪(Horizontal Tiling)是一種常用的CSS布局技術,它可以讓多個元素在同一行內水平排列,填滿整個父級容器。這種技術非常適合用于制作導航菜單、圖片墻等場景。
.tile-container { display: flex; /* 開啟 Flex 布局 */ flex-wrap: wrap; /* 自動換行 */ justify-content: space-between; /* 讓元素間隔平分容器的剩余空間 */ align-items: center; /* 垂直居中 */ } .tile { flex-basis: 23%; /* 設置每個元素寬度 */ height: 100px; /* 固定元素高度 */ background-color: #eee; /* 背景色 */ margin-bottom: 10px; /* 底部留白 */ }
以上是一個使用Flex布局實現水平平鋪效果的示例代碼,新增一個.tile元素即可生成一列。可以根據實際需求調整樣式,比如調整元素寬度、高度和背景色等。同時,為了讓每個元素的寬度自適應,在大型屏幕上會出現寬度損失的問題,可以使用CSS媒體查詢來設置自適應寬度。
@media screen and (min-width: 992px) { .tile { flex-basis: 15%; /* 設置寬度為15% */ } }
這樣,在屏幕寬度大于 992px 時,每個元素的寬度會自動縮小,保證整體布局的平衡性。
上一篇正方形圖片變成菱形css
下一篇正版css平臺