Почему мой поплавок идет влево, а не вправо?

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 плавать вправо, но почему-то он плавает влево. Я не могу сказать, мешает ли другой атрибут, но я был бы признателен за любую информацию. Я читал, что, возможно, мне следует разделить квартиру и дом на 2 разных элемента, но это ничего не изменило. Мой 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 сильный текст , который не позволяет мне даже визуализировать ваше приложение. как только я убрал строгий режим, у меня возникла ваша проблема. как решение: Если вы хотите визуализировать только социальные иконки в правой части страницы, выполните следующие действия:

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

, если вы хотите визуализировать lo go и социальные сети в затем примените правую сторону:

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

обратите внимание, что вы использовали float вместе с flex, что css не позволит вам сделать ... для получения дополнительной информации о flex и float вы можете посетить этот вопрос float не работает в гибком контейнере

Keep Coding! Спасибо !!

Answer 2

Привет, я использовал ваш css и следующий div. Это показывает на правой стороне отлично. Пожалуйста, проверьте в другом месте, чтобы найти проблему.

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

Answer 3

Просматривая ваш код, я могу обнаружить, что могут быть некоторые возможные ошибки. 1. Вы сохраняете width: 100% , поэтому он будет покрывать весь экран, так как Div является тегом блока, поэтому покроет всю ширину экрана. 2. По вышеуказанной причине ваш контент html будет по умолчанию оставлен.

Решение: для решения вы можете уменьшить ширину div или предоставить полный код вот так, чтобы мы могли видеть, что если есть еще один элемент, который находится в теле или как мы можем решить это!

Надеюсь, это поможет, если нет, то предоставьте всю ситуацию, и да, пожалуйста, проверьте ваш браузер dev-tool и проверь, что происходит на самом деле !!

Спасибо!