xinyouhe/cms-SiteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: richtext image layout — small photos row, medium float, large full-width

Browse Source
This commit is contained in:
浅念
2026-10-30 14:34:04 +08:00
parent 545db2b50c
commit 11c167fb54
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/trade-pro/blocks.css
+35
View File
@@ -799,3 +799,38 @@
.sf-theme-trade-pro .sf-section.sf-image_text .sf-placeholder{
font-size:48px;opacity:.3;
}
/* ── 正文图片排版（CMS markFloatImages 等效）── */
.sf-theme-trade-pro .sf-prose img,
.sf-theme-trade-pro .sf-richtext img{
max-width:100%;height:auto;border-radius:10px;
box-shadow:0 4px 16px rgba(15,37,68,.06);
}
/* 小图（员工照片 250px 宽）→ 横排一行 */
.sf-theme-trade-pro .sf-prose img[width="250"],
.sf-theme-trade-pro .sf-richtext img[width="250"]{
display:inline-block;width:180px;max-width:180px;
margin:4px 6px;border-radius:12px;
box-shadow:0 4px 16px rgba(15,37,68,.08);
vertical-align:top;
}
/* 中等宽度图（600px 左右）→ 左浮动文字环绕 */
.sf-theme-trade-pro .sf-prose img[width="600"],
.sf-theme-trade-pro .sf-prose img[width="500"],
.sf-theme-trade-pro .sf-prose img[width="400"]{
float:left;width:100%;max-width:400px;
margin:0 24px 12px 0;
}
/* 大图（>=800px）→ 通栏 */
.sf-theme-trade-pro .sf-prose img[width="1500"],
.sf-theme-trade-pro .sf-prose img[width="1200"],
.sf-theme-trade-pro .sf-prose img[width="1000"],
.sf-theme-trade-pro .sf-prose img[width="800"]{
width:100%;max-width:100%;display:block;
margin:24px 0;border-radius:12px;
}
/* 浮动清理 */
.sf-theme-trade-pro .sf-prose::after,
.sf-theme-trade-pro .sf-richtext::after{
content:'';display:table;clear:both;
}