你的代码问题主要出在评论容器的类名使用错误，导致Semantic UI的平行评论布局样式没有被正确触发。具体来说：

• 你把外层容器写成了ui container comment，但Semantic UI里，评论列表的容器需要用复数形式的ui comments，而单个评论才用comment类。你现在的写法相当于把单个评论的类套在了外层容器上，自然无法实现平行的列表布局。

下面是调整后的完整代码，我还加了一些细节优化：

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    // 用ui container做页面居中容器，内部嵌套评论组容器
    <div className="ui container">
      {/* 这是评论列表的核心容器，必须用ui comments类 */}
      <div className="ui comments">
        {/* 单个评论项，用comment类 */}
        <div className="comment">
          <a href="/" className="avatar">
            {/* 加个示例图片地址，不然头像区域是空的，布局展示不完整 */}
            <img alt="avatar" src="https://via.placeholder.com/40" />
          </a>
          <div className="content">
            <a href="/" className="author"> Pratik </a>
            <div className="metadata">
              <span className="date"> Today at 6:00PM</span>
            </div>
            <div className="text">This is a nice blog </div>
          </div>
        </div>
        {/* 再加一个评论示例，能更直观看到平行布局效果 */}
        <div className="comment">
          <a href="/" className="avatar">
            <img alt="avatar" src="https://via.placeholder.com/40" />
          </a>
          <div className="content">
            <a href="/" className="author"> Alex </a>
            <div className="metadata">
              <span className="date"> Today at 7:15PM</span>
            </div>
            <div className="text">Thanks for sharing this great content!</div>
          </div>
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('#root'))

关键修改说明： #

1. 容器结构调整：把原来的ui container comment拆成两层——ui container负责页面内容居中，内部的ui comments作为评论列表的容器，这是Semantic UI评论组件的标准结构，只有这样单个comment元素才会自动排列成平行的垂直列表。
2. 头像优化：给头像img标签加了示例图片地址，避免头像区域为空，能更清晰展示完整的评论布局结构。

这样修改后，就能得到你想要的平行结构评论布局了。

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