如何让人物展示与动态问候语在同一行显示？

嘿，我来帮你搞定这个同行显示的问题！目前上下排列的核心原因，大概率是你的「人物展示」元素和通过document.write输出的问候语，默认被浏览器当成了块级元素（比如div、p这类）——块级元素会自动占据整行空间，自然就会上下堆叠啦。下面给你两种实用的解决方案，按需选择：

方法1：用DOM操作+Flex布局（推荐，现代开发更常用） #

这种方法放弃直接用document.write，改用更灵活的DOM元素插入，再通过Flex布局轻松实现同行对齐：

步骤1：先写好HTML结构 #

提前把人物展示和问候语容器放在同一个父元素里，用Flex布局让它们同行：

<!-- 父容器用flex实现同行，align-items确保垂直居中 -->
<div class="greeting-container" style="display: flex; align-items: center; gap: 8px;">
  <!-- 人物展示元素，这里用图片举例 -->
  <div class="user-avatar">
    <img src="your-avatar.png" alt="用户头像" width="40" height="40" />
  </div>
  <!-- 用来放动态问候语的空容器 -->
  <span id="dynamic-greeting"></span>
</div>

步骤2：修改JavaScript代码 #

不再直接document.write，而是找到问候语容器，把内容塞进去：

// 获取提前准备好的问候语容器
const greetingElement = document.getElementById('dynamic-greeting');
const currentHour = new Date().getHours();
let greetingText = '';

// 简化时间判断逻辑，比一个个列条件更清晰
if (currentHour >= 1 && currentHour <= 12) {
  greetingText = "Good Morning!";
} else if (currentHour >= 13 && currentHour <= 17) {
  greetingText = "Good Afternoon!";
} else {
  // 补充晚上的情况，让逻辑更完整
  greetingText = "Good Evening!";
}

// 把问候语写入容器
greetingElement.textContent = greetingText;

这种方式的好处是：样式控制更灵活，而且document.write在页面加载完成后使用可能会清空页面，DOM操作则完全没有这个问题。

方法2：保留document.write（仅适合简单场景） #

如果你一定要用document.write，那得确保人物展示和问候语都是行内元素（比如span），这样浏览器就会把它们放在同一行：

<!-- 人物展示用span（行内元素） -->
<span class="user-avatar">
  <img src="your-avatar.png" alt="用户头像" width="40" height="40" />
</span>

<script>
var day = new Date();
var hr = day.getHours();
let greeting = "";

if (hr >= 1 && hr <= 12) {
  greeting = "Good Morning!";
} else if (hr >=13 && hr <=17) {
  greeting = "Good Afternoon!";
} else {
  greeting = "Good Evening!";
}

// 把问候语包裹在span里（行内元素），确保和前面的头像同行
document.write(`<span>${greeting}</span>`);
</script>

关键提醒 #

如果你的人物展示原本是div这类块级元素，一定要给它加样式display: inline-block;，让它变成可以和行内元素同行的块级元素哦！

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