如何在不使用 flexbox 的情况下水平渲染 div？

Question

我正在使用 ReactJS 和 Typescript 设计一个网站，我希望每个页面都位于一张卡片上，当用户使用导航栏时，当前卡片会滑开，新卡片会滑入。我正在使用react-transition-group 来完成这个。我最终想为其添加方向，但我陷入了早期的障碍。

一切正常，当前路线存在，新路线加载出屏幕，当前路线滑开，新路线滑入。

我的问题是新组件每次都在新行上呈现 - 不与当前组件内联。这会导致先跳后跳。我试图通过使我的父容器 display: flex; 和我的每个子容器 flex: 1 来修复它，但正如您可以想象的那样，这会导致一些非常奇怪的结果在两个组件的宽度过渡期间出现。我还尝试通过将 flex 更改为 flex: 1 1 100% 和其他一些变体来解决此问题，但无济于事。

我确实把我的 App.tsx 放在这里了，但老实说 - 感觉不太相关。如果你觉得你需要它 - 请告诉我。基本结构为：

<div id='main>
    <Route exact path={path} key={title}>
        <CSSTransition
            classNames='mainCard'
            nodeRef={refQuery}
            unmountOnExit
        >
            <div
                className='mainCard'
                ref={refQuery}
            >
                <Component />
            </div>
        </CSSTransition>
        ...
    </Route>
</div>

我的 _animations.scss 有：

.mainCard-enter {
    transform: translateX(100%);
}
.mainCard-enter-active {
    transform: translateX(0%);
    transition-delay: 0.6s;
    transition: transform 0.3s ease-in;
}
.mainCard-exit {
    transform: translateX(0%);
}
.mainCard-exit-active {
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
}

然后，在我的 custom.scss 中，我一直在尝试解决问题：

#main {
    display: flex;
    justify-content: space-between;
    .mainCard {
        flex: 1
    }
}

我也试了一下 css 网格，但我没有太多练习，所以无法解决。

注意：这个项目使用 Bootstrap，所以如果你有 class-y（看看我在那里做了什么？）修复它的方法 - 我很好还有那个。

提前致谢！

Answer 1

因此，该项目的想法发生了很大变化，但这里的一般修复是我需要改用 transform: translate3d()！

如何在不使用 flexbox 的情况下水平渲染 div？

How do I render divs horizontally without using flexbox?

css

css-transitions

reactjs

react-transition-group