定位 CSS

Question

我正在做一个项目，我需要一些帮助。 下图是我需要创建的布局： Right .

这张图片，是我得到的布局：错误的布局

步骤（欢迎，准备）应该是一个在另一个之下，就像RightLayout一样。

所以，这是我调用 NewAccordion function 的 Main.js 代码：

          if (procedures[step]){
            return (
              <NewAccordion
                key={`${index}-${step}`}
                index={index}
                opened={currentStepIndex === index}
                procedure={procedures[step]}
                commandSender={sendViewerMessage}
              />
            );
          } else return "";
        })} 

以下代码是我的 NewAccording function 错误的部分：

      <article className="angel__flow">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          {t(procedure.title[i18n.language])}
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </article>

下一个代码是 css 中的类名：

.angel__flow {
    display: block;
    width: 33.333333333333%;
    float: left;
    height: calc(100vh - 64px);
    text-align: center;
    overflow-x: scroll;
    padding: 8px;
    box-sizing: border-box;
}

所以，伙计们，我真的不知道怎么了。 如果你们中的任何人能帮助我，我将不胜感激。 我很抱歉我的英语不好，我来自巴西。

Answer 1

你可以这样试试：

  <div className="angel__flow" style="display:flex; flex-direction: column">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          <span>{t(procedure.title[i18n.language])}</span>
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </div>