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

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，但这并没有改变任何东西。我的 div 那个 condiv 主页是：

<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/chadlei

Answer 1

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

    .social{
width: 100%;
justify-content: flex-end;
}

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

.home{
justify-content: flex-end;
flex-direction: row;
}

请注意，您将 float 与 flex 一起使用，css 不允许您这样做... 有关 flex 和 float 的更多信息，您可以访问这个问题 float does not work in a flex container

继续编码！ 谢谢！！

Answer 2

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

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

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

谢谢！

Answer 3

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

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