如何在我的 Twitter 克隆中并排设置侧边栏、Feed 和小部件？

Posted 2023-03-28

【中文标题】如何在我的 Twitter 克隆中并排设置侧边栏、Feed 和小部件？

【英文标题】：How do I set my Sidebar, Feed and Widgets side to side in my Twitter clone?

【发布时间】：2021-02-16 01:29:10

【问题描述】：

我正在构建一个 twitter 克隆，并且如图所示，侧边栏、提要和小部件没有正确对齐。我应该怎么做才能重新对齐并将它们放置在正确的位置？我如何让它们并排放置？ How the clone looks right now

我将为应用、侧边栏、Feed 和小部件提供我的 CSS 代码。请检查我可能出错的地方。 APP：

body 
  –twitter-color: #50b7f5;
  –twitter-background: #e6ecf0;


.app 
  display: flex;
  height: 100vh;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;

对于饲料（仅包括定位）：

.feed 
  flex: 0.4;
  border-right: 1px solid var(–twitter-background);
  min-width: fit-content;
  overflow-y: scroll;

侧边栏：

.sidebar 
  border-right: 1px solid var(–twitter-color);
  flex: 0.25;
  min-width: 250px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;

对于小部件：

.widgets 
  flex: 0.3;

【参考方案1】：

尝试将此行添加到您的 css 代码中：

.app 
    flex-direction: row;
   

这是example。