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

【问题标题】：How do I render divs horizontally without using flexbox?如何在不使用 flexbox 的情况下水平渲染 div？
【发布时间】：2020-09-18 03:12:05
【问题描述】：

我正在使用 ReactJS 和 Typescript 设计一个网站，我希望每个页面都存在于卡片上，当用户使用导航栏时，当前卡片滑开，新卡片滑入。我正在使用 @987654321 @ 来完成这个。我最终想为其添加方向，但我遇到了之前的障碍。

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

我的问题是新组件每次都在新行上呈现 - 不是与当前组件内联。这会导致跳下然后向上跳。我试图通过使我的父容器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（看看我在那里做了什么？）方法来修复它 - 我也很擅长。

请提前感谢您！

【问题讨论】：

标签： css reactjs css-transitions react-transition-group

【解决方案1】：

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

【讨论】：