基于HTML/CSS实现带黄金比例与时间线的双列简历布局

需求回顾 #

我正在用HTML/CSS为简历的经验模块做双列布局：

• 左列右对齐，右列左对齐，列宽比例1:φ²（黄金比例）
• 右列包含职位标题、职责副标题和项目符号文本
• 左列包含公司标题、地点副标题和带起止日期的时间线，要求开始日期和右列文本最后一行对齐
• 两列之间要有一条带对应起止日期圆点的彩色细线分隔

我试过Grid、Flex、绝对/相对定位，已经用Grid实现了列宽比例和左列开始日期居底，但时间线搞不定。用伪元素做时间线的时候布局全乱了，下面是我当前的代码：

修正后的实现代码 #

CSS 部分 #

ul {
    hyphens: auto;
    overflow-wrap: break-word;
}

html {
    lang: en;
    font-size: 12pt;
}

:root {
    --golden-ratio: 1.618;
    --halfstep: 1.272;
    --quarterstep: 1.128;
    --eighthstep: 1.06;
    --timeline-color: #4CAF50;
}

@media print,
screen and (min-width: 210mm) {
    html,
    body {
        width: 210mm;
        max-width: 210mm;
        height: 297mm;
        max-height: 297mm;
        padding: 0;
        margin: 0;
    }
}

body {
    font-family: 'Lato', sans-serif;
    border: 1px solid black;
    font-size: 1rem;
}

header {
    background-color: var(--timeline-color);
    color: white;
    padding: 1em;
    text-align: center;
    margin: 0;
    width: 100%;
}

h1 {
    margin: 0;
    font-size: calc(1rem * var(--golden-ratio) * var(--golden-ratio) * var(--golden-ratio));
}

h2 {
    font-size: calc(1rem * var(--golden-ratio));
    color: var(--timeline-color);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: calc(1em/var(--golden-ratio)/var(--golden-ratio));
}

h2 i {
    font-size: calc(1em/var(--halfstep));
}

section {
    margin: 2em;
    font-size: 1rem;
}

.experience {
    margin-bottom: 2em;
}

.experience .section-header {
    margin-bottom: 1em;
}

.two-columns {
    display: grid;
    grid-template-columns: calc(100% / (1 + var(--golden-ratio) * var(--golden-ratio))) 1fr;
    gap: calc(1em * var(--golden-ratio));
    position: relative;
}

/* 两列之间的时间线分隔线 */
.two-columns::before {
    content: '';
    position: absolute;
    left: calc(100% / (1 + var(--golden-ratio) * var(--golden-ratio)));
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--timeline-color);
    transform: translateX(-50%);
}

.right-column {
    text-align: left;
}

.left-column {
    display: grid;
    grid-template-rows: auto auto 1fr;
    text-align: right;
    position: relative;
}

/* 左列的日期元素 */
.left-column .date {
    position: relative;
    padding-right: 1.5em;
}

/* 日期对应的圆点 */
.left-column .date::before {
    content: '';
    position: absolute;
    right: -calc(0.5em + var(--golden-ratio)*1em);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--timeline-color);
    transform: translateX(50%);
}

/* 开始日期居底 */
.left-column .date.start {
    align-self: end;
}

HTML 部分 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    <link rel="stylesheet" href="cv_template.css">

    <title>{{ name }} CV</title>

</head>

<body>
    <header>
        <h1>{{ name }}</h1>
        <p>{{ position_applying_for }}</p>
    </header>
    <section id="education">
        <h2>Education</h2>
        <p>{{ education.degree }}</p>
        <p>{{ education.university }}, {{ education.years }}</p>
    </section>
    <section class="experience">
        <div class="section-header">
            <h2><i class="fa-solid fa-briefcase"></i> Experience</h2>
        </div>
        <div class="two-columns">
            <div class="left-column">
                <h3>Skynet</h3>
                <h4>San Francisco</h4>
                <p class="date start">Mar 2014</p>
                <p class="date">Jan 2019</p>
            </div>
            <div class="right-column">
                <h3>Chief Architect Engineer</h3>
                <h4>Mind Control Infrastructure</h4>
                <ul>
                    <li>cool stuff.</li>
                    <li>even cooler stuff.</li>
                    <li>this i didn't really do, but i ran out of thing to say, and i didn't want to stop at just two.</li>
                </ul>
            </div>
        </div>
    </section>
</body>

</html>

关键修改说明 #

1. 时间线分隔线：用.two-columns::before伪元素创建两列中间的垂直细线，通过left属性精准定位到黄金比例列的分界处，transform: translateX(-50%)确保线在中间位置。
2. 日期圆点：给每个日期元素添加::before伪元素实现圆点，通过right属性定位到分隔线位置，transform: translateX(50%)让圆点刚好落在分隔线上。
3. 左列布局优化：调整左列的Grid行结构，用align-self: end让开始日期自动对齐到右列内容的底部，移除了复杂的嵌套timeline容器。
4. 样式统一：把时间线颜色提取为CSS变量，方便后续统一修改。

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