当前位置：首页 > news >正文

css 如何实现大屏4个占位中屏2个小屏幕1个

news 2025/7/18 8:29:40

1、使用grid

      .container {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;border: 1px solid red;width: 400px;height: 400px;}@media (max-width: 768px) {.container {grid-template-columns: 1fr;}}@media (min-width: 768px) and (max-width: 992px) {.container {grid-template-columns: repeat(2, 1fr);}}@media (min-width: 992px) and (max-width: 1200px) {.container {grid-template-columns: repeat(3, 1fr);}}@media (min-width: 1200px) and (max-width: 1920px) {.container {grid-template-columns: repeat(4, 1fr);}}@media (min-width: 1920px) {.container {grid-template-columns: repeat(6, 1fr);}}

2、flex布局

      .container {display: flex;flex-wrap: wrap;gap: 20px;}.item {background-color: red;color: #fff;font-size: 26px;width: 400px;height: 400px;text-align: center;line-height: 400px;}@media (max-width: 768px) {.item {flex: 1;}}@media (min-width: 768px) and (max-width: 992px) {.item {flex: 1 0 calc(50% - 20px);}}@media (min-width: 992px) and (max-width: 1200px) {.item {flex: 1 0 calc(33.33% - 20px);}}@media (min-width: 1200px) and (max-width: 1920px) {.item {flex: 1 0 calc(25% - 20px);color: yellow !important;}}@media (min-width: 1920px){.item {flex: 1 0 calc(20% - 20px)}}

3、grid和变量的结合

      .container {--columns: 4;display: grid;grid-template-columns: repeat(var(--columns), 1fr);gap: 20px;border: 1px solid red;}@media (max-width: 768px) {.container {--columns: 1;}}@media (min-width: 768px) and (max-width: 992px) {.container {--columns: 2;}}@media (min-width: 992px) and (max-width: 1200px) {.container {--columns: 3;}}@media (min-width: 1200px) and (max-width: 1920px) {.container {--columns: 4;}}@media (min-width: 1920px) {.container {--columns: 6;}}

4、多列布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 示例一 */.container {column-count: 3; /* 设置为3列 */column-gap: 20px; /* 每列之间的间距 */column-rule: 1px solid #ddd; /*列间距样式*/}.item {background-color: red;color: #fff;font-size: 26px;width:100%;height: 300px;text-align: center;line-height: 300px;margin: 10px;}@media (max-width: 768px) {.multi-column-article{column-count: 1;column-gap: 30px;}.container{column-count: 1;}}@media (min-width: 768px) and (max-width: 992px) {.multi-column-article{column-count: 2 !important;}.container{column-count: 2;}}@media (min-width: 992px) and (max-width: 1200px) {.multi-column-article{column-count: 3;}.container{column-count: 3;}}@media (min-width: 1200px) and (max-width: 1920px) {.multi-column-article{column-count: 4 !important;}.container{column-count: 4;}}@media (min-width: 1920px) {.multi-column-article{column-count: 6 !important;}.container{column-count: 6;}}body {font-family: "Noto Serif SC", serif;line-height: 1.6;padding: 20px;background-color: #f9f9f9;color: #333;}.multi-column-article {max-width: 100%;margin: 0 auto;padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);column-count: 3; /* 分成3列 */column-gap: 40px; /* 列间距 */column-rule: 1px solid #ddd; /* 列间分割线 *//* 可选优化属性 */column-fill: balance; /* 平衡各列内容高度 */break-inside: avoid; /* 避免内容在列间被切断 */orphans: 3; /* 避免段落最后一行单独在列底 */widows: 3; /* 避免段落第一行单独在列顶 */}/* 标题样式 - 跨所有列 */.multi-column-article h1 {column-span: all; /* 标题跨所有列 */text-align: center;margin-bottom: 30px;color: #2c3e50;}/* 段落样式 */.multi-column-article p {margin-bottom: 20px;text-align: justify;hyphens: none; /* 自动断字 */}/* 首段首字下沉效果 */.multi-column-article p:first-of-type::first-letter {font-size: 3em;float: left;line-height: 0.8;margin-right: 8px;color: #e74c3c;}</style></head><body><article class="multi-column-article"><h1>人工智能发展简史</h1><p>人工智能的发展可以追溯到20世纪50年fddfs时代my name isxiaosan大厦水电费防守打法地方代...</p><p>Only those whoer who who capture the moment are real. My personalfailure has only strengthened my resolve to make things right.</p><div>大是大非反反复复凤飞飞发发发发发发发发发发发</div><div>dsfddsfffffffffffffffff</div><div>saddddddddddddddddd</div><div>q</div><div>qdd</div><div>qd</div></article><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">91</div><div class="item">92</div></div></body>
</html>