fix overlap不鎖img單邊margin

This commit is contained in:
2026-05-20 00:38:05 +08:00
parent 128a0b0fc1
commit a29e01bcb1
+15 -8
View File
@@ -71,6 +71,7 @@
align-self: auto; align-self: auto;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
height: auto;
} }
/* 欄內透明(蓋過全站 section 預設底與陰影);overlap 內欄不套用 */ /* 欄內透明(蓋過全站 section 預設底與陰影);overlap 內欄不套用 */
@@ -442,16 +443,15 @@
/* border-left: 5px solid var(--primary); */ /* border-left: 5px solid var(--primary); */
} }
/* 只有在 .overlap-style 裡面的 31、32、33 才會套用重疊效果 */ /* overlap 三圖相疊(維持 float;欄位 margin 左右皆有,不鎖 img 單邊 margin) */
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style .container31 {
.overlap-style .container31 {
float: left; float: left;
width: 30%; width: 30%;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.overlap-style .container32 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style .container32 {
float: left; float: left;
width: 46%; width: 46%;
position: relative; position: relative;
@@ -460,25 +460,32 @@
margin-right: -8%; margin-right: -8%;
} }
.overlap-style .container33 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style .container33 {
float: left; float: left;
width: 30%; width: 30%;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* 清除浮動也只針對這個外層 */ body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style::after {
.overlap-style::after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
/* overlap 三張重疊圖維持直角(其餘好讀版圖片見上方 chronicle-reader img */
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style img { body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style img {
border-radius: 0; border-radius: 0;
overflow: visible; overflow: visible;
} }
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container.overlap-style .container32 img {
width: 42%;
max-width: none;
height: auto;
display: block;
position: relative;
z-index: 2;
}
</style> </style>
<link rel="stylesheet" href="split-nav.css"> <link rel="stylesheet" href="split-nav.css">
</head> </head>