绾㈣壊
灞曠ず
绮夎壊
绱壊
闈掕壊
鑼惰壊
缁胯壊
鎻愮ず锛氬搷搴斿搴︾偣涓猴細1200px, 900px, 600px
浠g爜
CSS浠g爜锛?/h5>
.box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
.box {
width: 50%;
min-width: 320px;
margin: auto;
overflow: hidden;
}
.cell {
width: calc((100% - var(--margins) * var(--columns) * 2) / var(--columns));
margin: var(--margins);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
background-color: #f0f3f9;
float: left;
}
.cell-header {
background: currentColor;
}
.cell-title {
color: #fff;
padding: var(--space);
font-size: var(--fontSize);
}
.cell-content {
height: 150px;
padding: var(--space);
font-size: var(--fontSize);
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}
HTML浠g爜锛?/h5>
<div class="box">
<div class="cell" style="color: #F44336;">
<header class="cell-header">
<div class="cell-title">绾㈣壊</div>
</header>
<main class="cell-content">鏀瑰彉娴忚鍣ㄧ殑瀹藉害</main>
</div>
<div class="cell" style="color: #E91E63;">
<header class="cell-header">
<div class="cell-title">绮夎壊</div>
</header>
<main class="cell-content">浼氱湅鍒板竷灞€鍙戠敓浜嗗彉鍖?lt;/main>
</div>
<div class="cell" style="color: #9C27B0;">
<header class="cell-header">
<div class="cell-title">绱壊</div>
</header>
<main class="cell-content">浠呬粎鏄€氳繃CSS鏀瑰彉涓€涓彉閲忓€煎疄鐜?lt;/main>
</div>
<div class="cell" style="color: #00BCD4;">
<header class="cell-header">
<div class="cell-title">闈掕壊</div>
</header>
<main class="cell-content">杩欐瘮浼犵粺鐨勫搷搴斿紡澶勭悊瑕佹洿鐪佷唬鐮佹洿濂界淮鎶?lt;/main>
</div>
<div class="cell" style="color: #009688;">
<header class="cell-header">
<div class="cell-title">鑼惰壊</div>
</header>
<main class="cell-content">鏈緥瀛愪富瑕佷负浜嗘紨绀哄搷搴斿紡涓庡彉鍖栨晥鏋?lt;/main>
</div>
<div class="cell" style="color: #4CAF50;">
<header class="cell-header">
<div class="cell-title">缁胯壊</div>
</header>
<main class="cell-content">鎵€浠ワ紝鑷充簬甯冨眬鍙樺寲缁嗚妭鏄惁鍚堢悊灏变笉鐢ㄥ湪鎰忎簡銆?lt;/main>
</div>
</div>
<div class="box"> <div class="cell" style="color: #F44336;"> <header class="cell-header"> <div class="cell-title">绾㈣壊</div> </header> <main class="cell-content">鏀瑰彉娴忚鍣ㄧ殑瀹藉害</main> </div> <div class="cell" style="color: #E91E63;"> <header class="cell-header"> <div class="cell-title">绮夎壊</div> </header> <main class="cell-content">浼氱湅鍒板竷灞€鍙戠敓浜嗗彉鍖?lt;/main> </div> <div class="cell" style="color: #9C27B0;"> <header class="cell-header"> <div class="cell-title">绱壊</div> </header> <main class="cell-content">浠呬粎鏄€氳繃CSS鏀瑰彉涓€涓彉閲忓€煎疄鐜?lt;/main> </div> <div class="cell" style="color: #00BCD4;"> <header class="cell-header"> <div class="cell-title">闈掕壊</div> </header> <main class="cell-content">杩欐瘮浼犵粺鐨勫搷搴斿紡澶勭悊瑕佹洿鐪佷唬鐮佹洿濂界淮鎶?lt;/main> </div> <div class="cell" style="color: #009688;"> <header class="cell-header"> <div class="cell-title">鑼惰壊</div> </header> <main class="cell-content">鏈緥瀛愪富瑕佷负浜嗘紨绀哄搷搴斿紡涓庡彉鍖栨晥鏋?lt;/main> </div> <div class="cell" style="color: #4CAF50;"> <header class="cell-header"> <div class="cell-title">缁胯壊</div> </header> <main class="cell-content">鎵€浠ワ紝鑷充簬甯冨眬鍙樺寲缁嗚妭鏄惁鍚堢悊灏变笉鐢ㄥ湪鎰忎簡銆?lt;/main> </div> </div>