2

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

.second-part {
  height: 4.67%;
  background-color: white;
  padding: 20px 30px;
  border: 15px dolid black;
  font-weight: 100;
}

.subtitle-for-second-part {
  display: flex;
}

.subtitle-for-second-part h2 {
  text-transform: uppercase;
}

.describe-for-second-subtitle {
  display: flex;
}

.describe-for-second-subtitle p {
  font-size: 12px;
}

.with-button-second-part {
  display: flex;
}

.button-second-part {
  border: 1px solid black;
  border-radius: 35px;
  background-color: white;
}

.with-phone-picture {
  display: flex;
  justify-content: flex-end;
}
<div class="second-part">
  <div class="subtitle-for-second-part">
    <h2>this is bouncy</h2>
  </div>
  <div class="describe-for-second-subtitle">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
      deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
  </div>
  <div class="with-button-second-part">
    <button class="button-second-part">Read more</button>
  </div>
  <div class="with-phone-picture">
    <img src="res/images/phone-for-second-part.png" alt="phone">
  </div>
</div>

1 ответ 1

3

.second-part {
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
}

.subtitle-for-second-part h2 {
  text-transform: uppercase;
}

.describe-for-second-subtitle p {
  font-size: 12px;
}

.button-second-part {
  border: 1px solid black;
  border-radius: 35px;
  background-color: white;
}

.with-phone-picture {
  max-width: 250px;
}

img {
  width: 100%;
  height: 100%;
}
<div class="second-part">
  <div class="column"> <!-- Добавил -->
    <div class="subtitle-for-second-part">
      <h2>this is bouncy</h2>
    </div>
    <div class="describe-for-second-subtitle">
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
        deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
    </div>
    <div class="with-button-second-part">
      <button class="button-second-part">Read more</button>
    </div>
  </div>
  
  <div class="column"> <!-- Добавил -->
    <div class="with-phone-picture">
      <img src="https://picsum.photos/200" alt="phone">
    </div>
  </div>
</div>

4
  • Полезный, хороший ответ. Но, на мой взгляд, - раз у человека проблемы с решением элементарной задачи, то ему, и вероятно другим очень нужны разъяснения 12 дек 2019 в 15:07
  • разъяснения как раз не нужны, все понятно.
    – Ram Ce
    12 дек 2019 в 15:16
  • @Ram Ce в этом случае, почему сами не справились? Дали бы самоответ. Глядишь репой бы запаслись за вопрос и ответ :) 12 дек 2019 в 15:24
  • затупил, не сразу понял что к чему
    – Ram Ce
    12 дек 2019 в 16:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.