如何操作 - 分屏 1/2

了解如何使用 CSS 创建分屏 (50/50)。

如何创建分屏

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}

/* Control the left side */
.left {
left: 0;
background-color: #111;
}

/* Control the right side */
.right {
right: 0;
background-color: red;
}

/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}

亲自试一试 »