如何实现网站主页两栏布局：左侧Logo+右侧登录表单（仿Facebook）

你的核心问题是当前代码用了绝对定位强制居中登录框和Logo，导致float属性失效，无法实现左右分栏。下面是修改后的完整代码，完全复刻Facebook的左右布局逻辑：

修改后的HTML #

{% load static %}

<html lang="zh-CN">
<head>
    <title>Login Form</title>
    <link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
</head>
<body>
    <div class="container">
        <div class="logo-section">
            <img src="{% static "homepage/images/my_logo.png" %}"
                 class="avatar"
                 alt="网站Logo">
            <!-- 可添加Logo下方标语，贴合Facebook布局逻辑 -->
            <p class="slogan">连接你和身边的人与服务</p>
        </div>
        <div class="login-box">
            <h1>Login</h1>
            <form>
                <p>Username</p>
                <input type="text" name="" placeholder="Enter Username">
                <p>Password</p>
                <input type="password" name="" placeholder="Enter Password">
                <input type="submit" name="" value="Login">
                <a href="#">Forgot password?</a><br>
                <a href="#">Sign-up</a><br>
            </form>
        </div>
    </div>
</body>
</html>

修改后的CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f0f2f5; /* 匹配Facebook背景色 */
    font-family: sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    display: flex;
    max-width: 980px;
    width: 100%;
    gap: 40px;
    align-items: center;
}

.logo-section {
    flex: 1;
    min-width: 300px;
}

.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.slogan {
    font-size: 24px;
    color: #1c1e21;
    line-height: 28px;
}

.login-box{
    width: 320px;
    background: #fff;
    color: #1c1e21;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}

h1 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.login-box p {
    margin: 0 0 8px;
    font-weight: bold;
}

.login-box input {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 16px;
}

.login-box input[type="text"], input[type="password"] {
    color: #1d2129;
}

.login-box input[type="submit"] {
    border: none;
    background: #1877f2; /* 匹配Facebook主色调 */
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
}

.login-box input[type="submit"]:hover {
    background: #166fe5;
}

.login-box a {
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: #1877f2;
    display: block;
    text-align: center;
    margin-top: 16px;
}

.login-box a:hover {
    text-decoration: underline;
}

/* 响应式适配，小屏幕自动转为上下布局 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        text-align: center;
    }
}

关键修改说明 #

• 用Flexbox实现容器左右分栏，让页面整体垂直居中，同时保证布局自适应
• 移除所有position: absolute，让元素回到正常文档流，解决Logo超出屏幕的问题
• 调整背景色、阴影、按钮颜色等细节，贴近Facebook视觉风格
• 添加响应式适配，小屏幕下自动转为上下布局
• 优化输入框、按钮的内边距和边框样式，提升交互体验

内容的提问来源于stack exchange，提问作者BedfordDriggs