教程 - 分屏 1/2
瞭解如何使用 CSS 建立一個分屏（50/50）。
自己動手試一試 »
如何建立分屏
步驟 1) 新增 HTML
示例
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="女性頭像">
<h2>Jane Flex</h2>
<p>一些文字。</p>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="img_avatar.png" alt="男性頭像">
<h2>John Doe</h2>
<p>這裡也有一些文字。</p>
</div>
</div>
步驟 2) 新增 CSS
示例
/* 將螢幕分成兩半 */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* 控制左側 */
.left {
left: 0;
background-color: #111;
}
/* 控制右側 */
.right {
right: 0;
background-color: red;
}
/* 如果您希望內容水平和垂直居中 */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* 如果需要，設定居中容器內影像的樣式 */
.centered img {
width: 150px;
border-radius: 50%;
}
自己動手試一試 »
