如何在css相对位置或其他位置使用开始和结束？答案

【问题标题】：how to use start and end in css position reletive or others?如何在css相对位置或其他位置使用开始和结束？
【发布时间】：2022-01-20 21:34:51
【问题描述】：

我正在尝试在我的 nextjs 项目和 MUI 库中使用多种语言，并且我正在使用语言环境设置我的项目方向的主体元素。

  const App = (props: MyAppProps) => {
    const {
        Component,
        emotionCache = clientSideEmotionCache,
        pageProps,
    } = props;

    const router = useRouter()
    const { locale } = router;
    

    return (
        <CacheProvider value={emotionCache}>
            <ThemeProvider theme={getTheme(theme)}>
                <CssBaseline />
                <GlobalStyles styles={{
                    body:{
                    backgroundColor:getTheme(theme).palette.Background.background,
                    direction:locale==="fa"?"rtl":"ltr"
                    }
                }}/>
                <Component {...pageProps} />
            </ThemeProvider>
        </CacheProvider>
    );
};

这与 text-align 属性配合得很好但是我在定位我的元素时遇到了问题，因为定位中有 right、left、bottom、top 属性，并且没有 start 和 end 属性。例如：

 width:50px;
 height:50px
 position: relative;
 left:2px

我的元素在上面的位置，我想在 RTL 定向语言（如波斯语）中从左侧定位 2px，但我想在 LTR 定向语言（如英语）中将其从右侧定位 2px。它通常使用 start 和 end 属性完成，但在 css 中我不知道，因为 position 属性中没有任何东西。所以我的问题是如何定位元素的 start 和 end 基础？

【问题讨论】：

您的问题含糊不清，您的示例代码与您的问题不兼容，请更改它，然后添加您最关心的代码部分。

标签： javascript html css reactjs next.js

【解决方案1】：

我无法理解您的代码，但问题与 CSS 有关，这就是我为您提供一些想法的原因。让你有一个元素<div id="element" class="{{ direction:locale==='fa'?'rtl':'ltr' }}">Your contents</div>

现在，把这个 css 放到你的样式页面中->

#element.rtl {
 left: 2px;
}
#element.ltr {
 right: 2px;
}

希望这会对您有所帮助。如果没有，请在此处评论。

【讨论】：

【解决方案2】：

display 将您的元素置于 flex 模式并使用 justify-content, ... 功能。去 enter link description here

【讨论】：

【解决方案3】：

您必须设置相对于 div 元素的位置，并设置嵌套的 div 元素的最小或正确位置。

像这样构造你的 HTML：

<div id="container">
  <div class="top left"></div>
  <div class="top right"></div>
</div>

CSS

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 2px;
}

.right {
  right: 2px;
}

【讨论】：