HTML/CSS仿站问题：如何给头部三列分别添加文本？

下面是几种可靠的实现方式，解决你只能在第一列添加文本的问题：

方法1：Flexbox（现代首选方案） #

Flexbox是当前最常用的一维布局工具，轻松实现等宽或自定义宽度的列布局：

<header class="site-header">
  <div class="header-col">第一列自定义文本</div>
  <div class="header-col">第二列自定义文本</div>
  <div class="header-col">第三列自定义文本</div>
</header>

.site-header {
  display: flex;
  padding: 1.2rem;
  background: #f0f0f0;
}

.header-col {
  flex: 1; /* 三列平分可用宽度 */
  text-align: center; /* 可选：文本居中 */
  padding: 0.6rem;
}

方法2：CSS Grid（二维布局更灵活） #

如果需要更复杂的布局调整，Grid是更好的选择：

<header class="site-header">
  <div class="header-col">第一列内容</div>
  <div class="header-col">第二列内容</div>
  <div class="header-col">第三列内容</div>
</header>

.site-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3个等宽列 */
  padding: 1.2rem;
  background: #f0f0f0;
}

.header-col {
  text-align: center;
  padding: 0.6rem;
}

方法3：浮动布局（兼容旧浏览器） #

如果需要兼容IE等旧浏览器，可使用浮动方案：

<header class="site-header">
  <div class="header-col">第一列文本</div>
  <div class="header-col">第二列文本</div>
  <div class="header-col">第三列文本</div>
  <div class="clear-float"></div>
</header>

.site-header {
  padding: 1.2rem;
  background: #f0f0f0;
}

.header-col {
  float: left;
  width: 33.33%;
  text-align: center;
  padding: 0.6rem;
  box-sizing: border-box; /* 避免内边距撑宽列 */
}

.clear-float::after {
  content: "";
  display: table;
  clear: both;
}

排查要点 #

如果之前只有第一列能显示文本，大概率是以下问题：

• 未给第二、第三列添加独立的容器元素
• 未设置正确的布局属性（比如没加display: flex/grid，或浮动属性）
• 列的宽度设置错误，导致其他列被挤压或隐藏

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