如何使全视图框图像在页面的左半部分浮动，文本滚动在页面的右半部分

要实现全视图框图像在页面的左半部分浮动，文本滚动在页面的右半部分，你可以使用HTML和CSS来完成这个布局。以下是一个简单的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Text Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="image-container">
            <img src="your-image.jpg" alt="Full View Image">
        </div>
        <div class="text-container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <!-- Add more text here -->
        </div>
    </div>
</body>
</html>

CSS部分（styles.css）

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    height: 100vh; /* Full viewport height */
}

.image-container {
    width: 50%;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.text-container {
    width: 50%;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f0f0;
}

解释

HTML结构：
- container 是整个页面的容器，使用 display: flex; 来实现左右布局。
- image-container 用于放置图像，占据页面的左半部分。
- text-container 用于放置文本，占据页面的右半部分，并且设置了 overflow-y: scroll; 使文本可以滚动。

CSS样式：
- body, html 设置为 height: 100%; 和 overflow: hidden; 以确保整个页面高度占满视口，并且隐藏溢出的内容。
- .container 使用 display: flex; 来实现左右布局。
- .image-container 和 .text-container 各自占据50%的宽度。
- .image-container img 设置为 width: 100%; 和 height: auto; 以确保图像占满容器并且保持比例。
- .text-container 设置了 overflow-y: scroll; 使文本可以垂直滚动，并且添加了一些内边距和背景色以提升视觉效果。