2

Проблема в том, что картинка под меню (справа, желтым цветом), а должна быть справа от меню

.right_menu {
  width: 150px;
  height: 400px;
  margin-left: 70px;
  background-color: yellow;
}

.profile_photo {
  width: 300px;
  height: 390px;
  background-color: blue;
  padding: 10px 10px 10px 10px;
}

.container_1 {
  display: flex;
}
<div class="container_1"></div>
<div class="right_menu">
  <p>Моя страница</p>
  <p>Новости</p>
  <p>Сообщения</p>
  <p>Друзья</p>
  <p>Группы</p>
  <p>Фотографии</p>
  <p>Музыка</p>
  <p>Видео</p>
  <p>Игры</p>
</div>
<div class="profile_photo">
  <img src="PLANKTON.jpg" style="width:300px; height: 300px;">
</div>

0

3 ответа 3

2

Изменённые строки помечены !!!:

.right_menu {
  width: 150px;
  height: 400px;
  margin-left: 70px;
  background-color: yellow;
  float: left; /* !!! */
}

.profile_photo {
  width: 300px;
  height: 390px;
  background-color: blue;
  padding: 10px 10px 10px 10px;
  margin-left: 220px; /* !!! */
}

.container_1 {
  /* display: flex; */ /* !!! */
}
<div class="container_1"></div>
<div class="right_menu">
  <p>Моя страница</p>
  <p>Новости</p>
  <p>Сообщения</p>
  <p>Друзья</p>
  <p>Группы</p>
  <p>Фотографии</p>
  <p>Музыка</p>
  <p>Видео</p>
  <p>Игры</p>
</div>
<div class="profile_photo">
  <img src="PLANKTON.jpg" style="width:300px; height: 300px;">
</div>

1

Лучше обернуть все это в контейнер и использовать display: flex;

.container {
  display: flex;
}

.right_menu {
  width: 150px;
  height: 400px;
  margin-left: 70px;
  background-color: yellow;
}

.profile_photo {
  width: 300px;
  height: 390px;
  background-color: blue;
  padding: 10px 10px 10px 10px;
}

.container_1 {
  display: flex;
}
<div class="container">
  <div class="container_1"></div>
  <div class="right_menu">
    <p>Моя страница</p>
    <p>Новости</p>
    <p>Сообщения</p>
    <p>Друзья</p>
    <p>Группы</p>
    <p>Фотографии</p>
    <p>Музыка</p>
    <p>Видео</p>
    <p>Игры</p>
  </div>
  <div class="profile_photo">
    <img src="https://get.wallhere.com/photo/women-model-car-legs-shorts-high-heels-road-thighs-Person-girl-beauty-leg-footwear-photo-shoot-abdomen-332459.jpg" style="width:300px; height: 300px;">
  </div>
</div>

А картинка под менюшкой, потому, что div Элемент блочный и это его естественное поведение

.container,
.container_1 {
  margin: 5px;
  width: 100px;
  height: 100px;
  background: red;
}
<div class="container"></div>
<div class="container_1"></div>

4
  • а я помню ты меня спрашивал откуда такие ножки ...:))
    – user33274
    13 апр 2018 в 21:19
  • @МаксимЛенский , решил не нарушать традиции)))))
    – Air
    13 апр 2018 в 21:33
  • @Air Вот это ноги нашёл. Плюс за решение, а не за ножки, хотя ноги тоже хороши :) 14 апр 2018 в 5:37
  • @Alexandr_TT, ))))))))
    – Air
    14 апр 2018 в 7:53
0

добавь float:left к .right_menu

https://html5book.ru/css-position/#float

1
  • Ну и зачем минусовать? Правильный ответ же. Ну почти правильный...
    – Qwertiy
    13 апр 2018 в 21:07

Ваш ответ

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

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