Cверстать карточку товара

Question

Примерный макет на FigmaПодскажите как сверстать карточку товара например с фото в левой части и описанием с права от карточки а так же разместить кнопку под описанием? Как правильно разместить img картинку в div? Спасибо заранее!

1: Примерный макет на Figma https://www.figma.com/file/CUqMIR69tBhKRd8xqe8Sc7/Untitled?node-id=0%3A1

Answer 1

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

img {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 2em;
}
p {
  width: 50%;
  overflow: hidden;
}

<div><img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in massa nunc. Nullam tincidunt est eget sagittis cursus. Nunc auctor magna a augue rhoncus, nec facilisis nisl hendrerit.

    </p>
    <button type="button">Button</button>
  </div>

Answer 2

Вам нужно почитать и разобраться с двумя главными системами расстановки элементов: Flexbox и Grid Layout. Там нет ничего сложного, но тогда станет намного проще верстать.

Нужно смотреть на конкретный макет и его задачи и требования. Вот абстрактный пример с гридами:

.card {
  background-color: #eee;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  grid-row-end: span 2;
}

.card__description {
  margin: 0;
}

.card__button {
  justify-self: end;
  align-self: end;
  padding: 10px;
}

<article class="card">
   <img class="card__image" 
         src="https://i1.silvergames.com/j/b/nyan-cat.jpg" 
         alt="Nyan Cat">
   <p class="card__description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id facilisis lectus, at varius libero. Nullam finibus neque eget nisi tempor tristique.
   </p>
   <button type="button" class="card__button">Подробнее...</button>
 </article>

БЛОГ НА HUSL

Cверстать карточку товара

Ответы (2 шт):