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 is
xiaosan大厦水电费防守打法地方代...
</p>
<p>
Only those whoer who who capture the moment are real. My personal
failure 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>