Хочу как на фото. Но у меня Почему-то текст находится под фото и за пределы фотографии не может выйти?

Question

[Danil2134]

<section class="elvo">
          <div class="container">
            <div class="elvo__section">
              <img class="elvo__img" src="Images/elvo.jpg" alt="" />
              <div class="elvo__window">
                <p class="elvo__title">Компания elvo</p>
                <p class="elvo__input">Лучшая компания</p>
                <p class="elvo__text">
                  Строительная компания ELVO является проектной организацией,
                  которая отвечает за подготовку всего проекта, в соответствии с
                  договором или контрактом.
                </p>
              </div>
            </div>
          </div>
        </section>

.elvo {
  display: flex;
}

.elvo__section {
  margin-top: 40px;
  height: 770px;
}

.elvo__img {
  float: right;
  width: 700px;
  height: 500px;
  /*position: absolute;*/
  margin-right: 0;
}

.elvo__window {
  height: 510px;
  width: 460px;
  margin-left: 5px;
}
/*background-color: #f1f1f1;
  position: relative;
  
}*/

Comments

[ProjectSoft]

Научитесь выкладывать код на codepen.io

Answer 1

[wervan]

Я тебе сильно подредачил, остальное позишин абсолют сделай сам. Суть : надо научиться пользоваться flex чтобы понимать что куда идет. Flex это типо контейнер, в котором можно управлять расположением, вот почитай на хабре гайд и может поймешь

<div class="elvo">
      
        <div class="elvo__section">
          
            <div class="elvo__window">
              <p class="elvo__title">Компания elvo</p>
              <p class="elvo__input">Лучшая компания</p>
              <hr />
              <p class="elvo__text">
                Строительная компания ELCO является проектной организацией,
                  которая отвечает за подготовку всего проекта, в соответствии с
                  договором или контрактом.
              </p>
            </div>
            
            <div class="sss">
              <img class="elvo__img" src="https://avatars.mds.yandex.net/i?id=d3ff560daf1ac26b8e28a8637a7c1ad1dd762b6a-10384982-images-thumbs&n=13" alt="" />
            </div>
        </div>
        
    </div>

.elvo{
  width: 1100px;
    margin-top: 40px;
  height: 770px;
}
.elvo__section {

  display: flex;
 
  align-items: flex-end;
}

.elvo__img {
  
  width: 700px;
  height: 500px;
  
}
hr{
  width: 100px;
  
  
}

.elvo__window {
 
  display: flex;
  flex-flow: column wrap;
 
  padding: 40px;
  height: 290px;
  width: 460px;
 
  
  background-color: grey;
}
/*background-color: #f1f1f1;
  position: relative;
  
}*/

Comments

[Danil2134]

Можно вопрос?
А почему решил container убрать?