< 模板:国内商家
无编辑摘要 |
无编辑摘要 |
||
第8行: | 第8行: | ||
.responsive-container > div { | .responsive-container > div { | ||
margin: 15px; | margin: 15px; | ||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.responsive-container img { | |||
max-width: 100%; | |||
height: auto; | |||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
第15行: | 第22行: | ||
.responsive-container > div { | .responsive-container > div { | ||
flex: 1; | flex: 1; | ||
} | } | ||
} |
2024年3月5日 (二) 14:01的版本
.responsive-container { display: flex; flex-direction: column; border: 1px solid #ddd; /* 边框颜色 */ border-radius: 5px; /* 边框圆角 */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* 阴影效果 */ } .responsive-container > div { margin: 15px; display: flex; justify-content: center; align-items: center; } .responsive-container img { max-width: 100%; height: auto; } @media (min-width: 768px) { .responsive-container { flex-direction: row; } .responsive-container > div { flex: 1; } }