< 模板:国内商家
(创建页面,内容为“ .responsive-container { display: flex; flex-direction: column; } .responsive-container > div { margin: 15px; } @media (min-width: 768px) { .responsive-container { flex-direction: row; } .responsive-container > div { flex: 1; } }”) |
无编辑摘要 |
||
(未显示同一用户的7个中间版本) | |||
第1行: | 第1行: | ||
.responsive-container { | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border: 1px solid #ddd; /* 边框颜色 */ | |||
border-radius: 5px; /* 边框圆角 */ | |||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* 阴影效果 */ | |||
} | } | ||
.responsive-container > div { | .responsive-container > div { | ||
margin: 15px; | margin: 15px; | ||
display: flex; | |||
align-items: center; | |||
} | |||
.responsive-container img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.data-container { | |||
display: flex !important; | |||
flex-direction: column; | |||
align-items: flex-start !important; | |||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { |
2024年3月5日 (二) 14:34的最新版本
.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; align-items: center; } .responsive-container img { max-width: 100%; height: auto; } .data-container { display: flex !important; flex-direction: column; align-items: flex-start !important; } @media (min-width: 768px) { .responsive-container { flex-direction: row; } .responsive-container > div { flex: 1; } }