< 模板:国内商家
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
.responsive-container { | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
第15行: | 第15行: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | |||
.data-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: flex-start; | |||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
第22行: | 第27行: | ||
.responsive-container > div { | .responsive-container > div { | ||
flex: 1; | flex: 1; | ||
} | } | ||
} | } |
2024年3月5日 (二) 14:05的版本
.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; } .data-container { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 768px) { .responsive-container { flex-direction: row; } .responsive-container > div { flex: 1; } }