CSS，我想要 3 个不同高度和宽度的 div 并排并排在顶部。我该怎么做呢

Posted 2023-02-22

【中文标题】CSS，我想要 3 个不同高度和宽度的 div 并排并排在顶部。我该怎么做呢

【英文标题】：CSS, I want 3 divs of different heights and widths side by side and level at the top. How do I do this

【发布时间】：2020-08-31 17:42:09

【问题描述】：

首先，我知道有人真的会为我彻底解决这个问题，但即使只是指出我需要学习的正确方向才能做到这一点，我也非常感激。我是 CSS 的菜鸟。

我想要 3 个不同高度和宽度的 div 并排并排在顶部。

这是我的 html（它在反应，但我认为这不会影响如何执行此操作。ClassName 是类）

'''

  <div className="AppMain">
    <div className="SectionOne" />
      <FishPole fishPoleImg=props.state.fishPoleImg />
      <FishButton handleClick=props.handleClick/>
      <FishCount fps=props.state.fps fishCount=props.state.fishCount />
      <BaitShop />
    <div />

    <div className="SectionTwo">
     <Structures />
    </div>

    <div className="SectionThree">
      <StructureStore fishCount=props.state.fishCount/>
    </div>
  </div>

</div>

我希望className="AppMain" 下的 3 个 div 并排排列。 SectionOne div 的宽度为 270px，SectionTwo div 占据了其他两个section 没有占据的所有宽度，SectionThree div 的宽度为 300px。

这就是我现在得到的。 （如您所见，我什至无法将它们并排放置，而且这张图片非常缩小，因此您可以看到所有内容）

【问题讨论】：

我推荐使用CSS Grid

可能只是将.appmain 做成一个带有display: flex; flex-direction: row 的flexbox 容器（列，FBL 默认）。不知道 React 是怎么想的……

【参考方案1】：

查看您的 CSS 代码会很好，因此我们可以提供更多帮助，但可能只需将 vertical-align: top; 添加到您的元素 CSS 中，您就可以在顶部工作。

【讨论】：

Vertical align 仅适用于 <img> 等图形元素

嘿，我实际上可以使用 flex 来解决问题。原来我确实知道如何使用 flex 我只是在反应中组织 HTML 错误。