@kentos

Как сделать красиво?

Здравсвуйте, как сделать фото по правому краю и всё с левого?
страница

Должно полуучится так
5b7abcce86d96158624500.png

Я сделал только по вертикале, код:
<div class="recept">

  <img src="http://salatoria.monotone.by/wp-content/uploads/2018/08/images.png">
  <h2>Ингредиенты</h2>
  <ul>
    <li>Сочный салат<span class="gramm">150 гр.</span></li>
    <li>Сочный салат<span class="gramm">1 шт.</span></li>
    <li>Сочный салат<span class="gramm">150 гр.</span></li>
    <li>Сочный салат<span class="gramm">1 шт.</span></li>
    <li>Сочный салат<span class="gramm">150 гр.</span></li>
    <li>Сочный салат<span class="gramm">По вкусу</span></li>
  </ul>
</div>
<div class="cook">
<h2>Приготовление</h2>
  
  <ol>
    <li>Курицу нарезать тонкими ломтиками и замариновать в соке лайма с солью и перцем в течение 5–10 минут. Обжарить на растительном масле до золотистого цвета. </li>
    <li>Апельсин очистить ножом, срезая все белые части, затем вырезать дольки, избегая пленок. Лук нарезать толстой соломкой, авокадо разрезать пополам, извлечь косточку, при помощи ложки избавить половинки авокадо от кожи и нарезать дольками. </li>
    <li>Смешать сок лайма с измельченной мятой, 60 мл масла, сахаром, солью и перцем при помощи венчика. </li>
    <li>Смешать романо, курицу, авокадо и филе апельсина с лаймовой заправкой и тут же подавать.</li>
  </ol>
   </div>


h2 {
  text-transform:uppercase;
  font-size:20px;
  font-family:'Montserrat';
  font-weight:600;
}

.recept ul > li{
  border-top:1px solid #d1d1d1;
  /*padding-top:2px;*/
  /*padding-bottom:2px;*/
}

.recept ul > li:last-child {
      border-bottom:1px solid #d1d1d1;
}

.recept ul > li {
  list-style-type:none;
  margin-left:-12%;
}

.recept li > span {
  float:right;
}

.cook ol {
  font-family:'Montserrat';
  font-weight:500;
  margin-left: 5%;
}
.cook li {
  margin-bottom:4%;
  text-align:justify;
}

.cook h2 {
    margin-top:9%;
}


Хелпаните плз
  • Вопрос задан
  • 135 просмотров
Пригласить эксперта
Ответы на вопрос 1
UnluckySerivelha
@UnluckySerivelha
Картинку в отдельную обёртку, блок с текстом тоже, всё это в один контейнер с display: flex.5b7abf2d18162120460307.jpeg
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы