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

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。它完美地显示在右侧。请检查其他地方以查找问题。&nbsp;<div&nbsp;className='condiv&nbsp;home'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src={profilePic}&nbsp;className='profilepic'></img> &nbsp;</div>