为什么我的浮标向左而不是向右？

Question

    @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap');:root{  --sidebar-flex:1.5;  --condiv-flex:6;  --fontsize-p:1.2rem;  --fontsize-nav:1.6rem;  --typing-font:3rem;}* {  margin:0;  padding: 0;}body {  font-family: "Montserrat", Arial, sans-serif;  background: #fff;  background: purple;  font-size: 15px;  line-height: 1.8;  font-weight: 500;  color: #999999;}.App {  display: flex;  width: 100vw;  min-height: 100vh;}/* .condiv class is for the right side content container*/.condiv{  background: #fff;  width: 100%;  float: right;  -moz-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  -webkit-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  transition: all 0.5s ease;}@media (min-width: 992px) {  .condiv {    width: 75%;}}/* For Home Page */.home {  display: flex;  justify-content: center;  flex-direction: column;  align-items: center;}这是一个 React 应用程序，我试图让 condiv 向右浮动，但由于某种原因它向左浮动。我无法判断是否有其他属性干扰了它，但我将不胜感激任何见解。我读过也许我应该将 condiv 和 home 分成 2 个不同的 div，但这并没有改变任何东西。我的condiv主页的div是：<div className='condiv home'>        <img src={profilePic} className='profilepic'></img>        <ReactTypingEffect className='typingeffect' text={["Hi, I'm Chad"]} speed={100} eraseDelay={700}/>        <Social/></div>可以在这里找到我的整个存储库的链接：https://github.com/ChadLei/chadei

Answer 1

因此，从您的存储库中，我注意到您使用的是 strinctMode强文本，这甚至不允许我渲染您的应用程序。当我删除严格模式后，我就遇到了你的问题。作为解决方案：如果您只想在页面右侧呈现社交图标，请执行以下操作：

    .social{

width: 100%;

justify-content: flex-end;

}

如果您想将徽标和社交媒体都呈现在右侧，请应用此：

.home{

justify-content: flex-end;

flex-direction: row;

}

请注意，您将 float 与 flex 一起使用，CSS 不允许您这样做...

Answer 2

通过查看你的代码，我发现可能存在一些错误。 1.你保持宽度：100％，所以它将覆盖整个屏幕，因为 Div 是一个块标签，所以它将覆盖屏幕的整个宽度。2. 由于上述原因，您的 html 内容将默认位于左侧。

解决方案：对于解决方案，您可以减小 div 的宽度，或者您可以在此处提供完整的代码，以便我们可以看到主体中是否存在另一个元素，或者我们如何解决这个问题！

希望这会有所帮助，如果没有，请提供整个情况，是的，请检查您的浏览器开发工具并检查实际发生的情况！

谢谢你！

Answer 3

您好，我使用了您的 css 和以下 div。它完美地显示在右侧。请检查其他地方以查找问题。

 <div className='condiv home'>
     <img src={profilePic} className='profilepic'></img>
 </div>