我正在尝试将页面分成两部分,但大小不同。 使用以下代码,我得到 2 个部分,但大小相同。
html部分是:
<div class="split left">
<div class="centered">
<h2>Jane Flex</h2>
<p>Some text.</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>John Doe</h2>
<p>Some text here too.</p>
</div>
</div>
CSS 是:
.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: orange;
}
/* 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%;
}
可以吗? 提前致谢
最佳答案
从 .split
类中删除 width:50%
。并将宽度属性(无论你想要什么)添加到 .left
和 .right
类。
/* Control the left side */
.left {
left: 0;
background-color: orange;
width: 30%;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
width: 70%;
}
关于css - 将屏幕分成两部分,宽度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54839636/