style: 二欄 flex 等高對齊
This commit is contained in:
@@ -185,6 +185,83 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 二欄列：父層 flex 等高（欄位改 flex 分寬，不再只靠 50% float 寬） */
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container21,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container22 {
|
||||
float: none;
|
||||
width: auto;
|
||||
flex: 1 1 50%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container21 > img,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container22 > img {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container21 > section.ebook-intro.section,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container21):has(> .container22) > .container22 > section.ebook-intro.section {
|
||||
flex: 1 1 auto;
|
||||
min-height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 三欄列：同上等高 */
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container31,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container32,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container33 {
|
||||
float: none;
|
||||
width: auto;
|
||||
flex: 1 1 33.33%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container31 > img,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container32 > img,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container33 > img {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container31 > section.ebook-intro.section,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container32 > section.ebook-intro.section,
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container31):has(> .container32):has(> .container33) > .container33 > section.ebook-intro.section {
|
||||
flex: 1 1 auto;
|
||||
min-height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 作業 float 區：只套 .readable-homework-block 內，不動全站 body／header */
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container {
|
||||
width: 100%;
|
||||
@@ -245,7 +322,6 @@
|
||||
body.ebook-ssg2-page.totoga2-page .ebook-main #totoga2-reader .ebook-intro.section[style*="background-color: var(--primary)"] h3 {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
@@ -352,67 +428,13 @@
|
||||
<section class="ebook-intro section">
|
||||
<h3>冷凍美男－姜成勳</h3>
|
||||
<p class="ebook-intro-lead">印象深刻的是主唱姜成勳擁有和 20 年前一樣的驚人外貌，堪稱冷凍人級別！還被張水院虧說到 70 歲還是會繼續留這個髮型！</p>
|
||||
<p class="ebook-intro-lead">事實上這段期間他經歷了波折，遭到合夥人詐騙卻被誣告，過了兩年法院才還他清白，應該是最辛苦的他，反而只覺得對粉絲和大眾感到抱歉，令人心疼！
|
||||
<p class="ebook-intro-lead">
|
||||
事實上這段期間他經歷了波折，遭到合夥人詐騙卻被誣告，過了兩年法院才還他清白，應該是最辛苦的他，反而只覺得對粉絲和大眾感到抱歉，令人心疼！
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container31 readable-col-3 readable-col-3--left">
|
||||
<img src="/totoga2/readable/11-3_160416_0_03.png" alt="李宰鎮">
|
||||
</div>
|
||||
<div class="container32 readable-col-3 readable-col-3--left">
|
||||
<section class="ebook-intro section">
|
||||
<h3>魔性魅力－李宰鎮</h3>
|
||||
<p class="ebook-intro-lead">節目剛開始時，大家高興地彼此問候，唯獨被嚇壞的李宰鎮問為什麼要這樣歡迎，性格似乎有點與眾不同。訪問輪到他時，就連劉在錫和 HAHA
|
||||
都緊張這座必須要跨越的喜馬拉雅山。</p>
|
||||
<p class="ebook-intro-lead">
|
||||
隨著節目的進行，開始發現他的魔性魅力，李宰鎮的獨特思考方式、新穎的回答，具有他個人特色的綜藝感，讓採訪過無數來賓，見過大風大浪的劉在錫也爆笑又暴跳！</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="container33 readable-col-3 readable-col-3--right">
|
||||
<img src="/totoga2/readable/12-2_160416_0_07.png" alt="劉在錫反應">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container41 readable-col-4 readable-col-4--left">
|
||||
<img src="/totoga2/readable/12-1_160416_0_06.png" alt="崩潰分鏡 1">
|
||||
</div>
|
||||
<div class="container42 readable-col-4 readable-col-4--left">
|
||||
<img src="/totoga2/readable/12-3_為什麼你要笑.jpeg" alt="為什麼你要笑">
|
||||
</div>
|
||||
<div class="container43 readable-col-4 readable-col-4--right">
|
||||
<img src="/totoga2/readable/12-4_160416_0_18.jpeg" alt="崩潰分鏡 2">
|
||||
</div>
|
||||
<div class="container44 readable-col-4 readable-col-4--right">
|
||||
<img src="/totoga2/readable/12-5_啊啊..jpeg" alt="啊啊..">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container31 readable-col-3 readable-col-3--left">
|
||||
<img src="/totoga2/readable/13-1_那是我畫的!所以是我的!.jpeg" alt="那是我畫的!所以是我的!">
|
||||
</div>
|
||||
<div class="container32 readable-col-3 readable-col-3--left">
|
||||
<img src="/totoga2/readable/13-2哥得自己畫!.jpeg" alt="哥得自己畫!">
|
||||
</div>
|
||||
<div class="container33 readable-col-3 readable-col-3--right">
|
||||
<img src="/totoga2/readable/13-31779025232670.jpg" alt="肖像畫成品">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container31 readable-col-3 readable-col-3--left">
|
||||
<img src="/totoga2/readable/13-4_160416_0_05.png" alt="訪談過程">
|
||||
</div>
|
||||
<div class="container32 readable-col-3 readable-col-3--left">
|
||||
<img src="/totoga2/readable/13-5_ScreenShot-VideoID-2epKr_O2s9E-TimeS-31.png" alt="對話節錄">
|
||||
</div>
|
||||
<div class="container33 readable-col-3 readable-col-3--right">
|
||||
<img src="/totoga2/readable/13-7_生氣在錫大頭版.png" alt="生氣在錫大頭版">
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container22 readable-col-2 readable-col-2--left">
|
||||
<img src="/totoga2/readable/11-2_無法輕易征服的高山 宰鎮.jpeg" alt="無法輕易征服的高山 宰鎮">
|
||||
@@ -426,7 +448,8 @@
|
||||
<div class="container11 readable-col-1">
|
||||
<section class="ebook-intro section">
|
||||
<h3>魔性魅力－李宰鎮</h3>
|
||||
<p class="ebook-intro-lead">節目剛開始時，大家高興地彼此問候，唯獨被嚇壞的李宰鎮問為什麼要這樣歡迎，性格似乎有點與眾不同。訪問輪到他時，就連劉在錫和 HAHA
|
||||
<p class="ebook-intro-lead">節目剛開始時，大家高興地彼此問候，唯獨被嚇壞的李宰鎮問為什麼要這樣歡迎，性格似乎有點與眾不同。訪問輪到他時，就連劉在錫和
|
||||
HAHA
|
||||
都緊張這座必須要跨越的喜馬拉雅山。</p>
|
||||
</section>
|
||||
</div>
|
||||
@@ -481,7 +504,8 @@
|
||||
<div class="container22 readable-col-2 readable-col-2--left">
|
||||
<section class="ebook-intro section">
|
||||
<h3>讓全場陷入混亂的「精神衝擊」</h3>
|
||||
<p class="ebook-intro-lead">控場能力一流的劉在錫也徹底崩潰，一邊按耐著受驚的心臟，一邊哭笑不得、畢恭畢敬地追問：「真的真的很抱歉，但是為什麼你要笑？」這種摸不著頭緒卻又無敵純真的個人特色，讓劉在錫也爆笑又暴跳！
|
||||
<p class="ebook-intro-lead">
|
||||
控場能力一流的劉在錫也徹底崩潰，一邊按耐著受驚的心臟，一邊哭笑不得、畢恭畢敬地追問：「真的真的很抱歉，但是為什麼你要笑？」這種摸不著頭緒卻又無敵純真的個人特色，讓劉在錫也爆笑又暴跳！
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
@@ -497,7 +521,8 @@
|
||||
<div class="container32 readable-col-3 readable-col-3--left">
|
||||
<section class="ebook-intro section">
|
||||
<h3>靈魂拷問與相當無語</h3>
|
||||
<p class="ebook-intro-lead">當被要求現場展示繪畫時，李宰鎮純真地吐出靈魂拷問：「你們為什麼見到諧星就要他搞笑，見到會畫畫的人就一定要他畫畫呢？」這番話讓劉在錫和 HAHA
|
||||
<p class="ebook-intro-lead">
|
||||
當被要求現場展示繪畫時，李宰鎮純真地吐出靈魂拷問：「你們為什麼見到諧星就要他搞笑，見到會畫畫的人就一定要他畫畫呢？」這番話讓劉在錫和 HAHA
|
||||
瞬間失去語言能力，雙手交疊乖乖坐好，靈魂短暫登出。</p>
|
||||
</section>
|
||||
</div>
|
||||
@@ -513,7 +538,8 @@
|
||||
<div class="container21 readable-col-2 readable-col-2--right">
|
||||
<section class="ebook-intro section">
|
||||
<h3>絕對所有權！</h3>
|
||||
<p class="ebook-intro-lead">好不容易在現場畫完了畫，當在錫哥理所當然地伸手準備拿走時，李宰鎮卻像個護著玩具的小孩，理直氣壯地一把護住自己的作品，神色認真地回絕：「不行，為什麼你要拿走？那是我畫的！所以是我的！」
|
||||
<p class="ebook-intro-lead">
|
||||
好不容易在現場畫完了畫，當在錫哥理所當然地伸手準備拿走時，李宰鎮卻像個護著玩具的小孩，理直氣壯地一把護住自己的作品，神色認真地回絕：「不行，為什麼你要拿走？那是我畫的！所以是我的！」
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
@@ -538,7 +564,8 @@
|
||||
<div class="container22 readable-col-2 readable-col-2--left">
|
||||
<section class="ebook-intro section">
|
||||
<h3>隊長聯手逗弄主持人的日常</h3>
|
||||
<p class="ebook-intro-lead">坐在一旁的隊長殷志源看著在錫哥被宰鎮逼到牆角，完全進入了看戲模式！志源非但沒有解圍，反而一把摟住自家大哥，理直氣壯地站在宰鎮這邊，對著在錫哥大喊：「哥要是想拿走，你得自己畫！」
|
||||
<p class="ebook-intro-lead">
|
||||
坐在一旁的隊長殷志源看著在錫哥被宰鎮逼到牆角，完全進入了看戲模式！志源非但沒有解圍，反而一把摟住自家大哥，理直氣壯地站在宰鎮這邊，對著在錫哥大喊：「哥要是想拿走，你得自己畫！」
|
||||
</p>
|
||||
<p class="ebook-intro-lead">平常是「初丁弟弟」的志源，配上活在純真世界裡的大哥宰鎮，一搭一唱直接把國民 MC
|
||||
逗得毫無還手之力。這種難以預測的思考方式與出人意料的回答，更讓所有人對這位神祕又迷人的角色充滿了無限的好奇！</p>
|
||||
@@ -705,10 +732,8 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-intro section"
|
||||
style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title"
|
||||
style="color: var(--primary); border-left-color: var(--primary);">
|
||||
<section class="ebook-intro section" style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--primary); border-left-color: var(--primary);">
|
||||
請脫下眼罩：累積16年的情感爆發</h2>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">
|
||||
高志溶獨自先到達休息室等待，其他五位成員率先出場。主持人在成員上台前，和台下粉絲約定好安靜，等大家脫下眼罩才能發出聲音。成員們一進場時，台上台下一片寂寥與黑暗，戴著眼罩的成員們此刻非常緊張，就連平常看似無所畏懼的隊長殷志源都緊張到伸出手找金在德牽著。
|
||||
|
||||
Reference in New Issue
Block a user