Блог

Главная - Вопросы по программированию - Как стилизовать карточки в css

Как стилизовать карточки в css

#html #css

#HTML #css

Вопрос:

Итак, я выровнял эти 2 карточки так, как я хочу, с помощью начальной загрузки и display: flex; . Когда я пытаюсь внести некоторые изменения в CSS, например, переместить класс details в середину или изменить ширину и высоту карточки и т. Д., Это не сработает. Как я могу это сделать? Вот код:

 <div class="row">
  <div class="col-lg-4 col-md-6 pop-up">
    <div class="front">
      <div>
        <img class="girlimg" src="girl.jpg" alt="asdasda" />
        <h2 class="activname">Guided hiking tours</h2>
        <button class="activbutt" type="button" name="button">
               SEE DETAILS
               </button>
      </div>
      <div class="details">
        <div class="duration">
          <i class="fas fa-clock">Duration</i>
        </div>
        <div class="people">
          <i class="fas fa-user-friends"></i><br />
          <p>Max adults:10</p>
        </div>
        <div class="kids">
          <i class="fas fa-child"></i><br />
          <p>Max children:3</p>
        </div>
      </div>
    </div>
  </div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
  <div class="front">
    <div>
      <img class="girlimg" src="bike.jpg" alt="asdasda" />
      <h2 class="activname">Rent a bike(4 hours)</h2>
      <button class="activbutt" type="button" name="button">
             SEE DETAILS
             </button>
    </div>
    <div class="details">
      <div class="duration">
        <i class="fas fa-clock">Duration
               <p>QUARTER DAY</p> </i>
      </div>
      <div class="people">
        <i class="fas fa-user-friends"></i><br />
        <p>Max adults:9</p>
      </div>
      <div class="kids">
        <i class="fas fa-child"></i><br />
        <p>Max children:0</p>
      </div>
    </div>
  </div>
</div>
</div>
</div>

Комментарии:

1. Я думаю, было бы легче понять, чего вы пытаетесь достичь, если бы вы могли создать пример в codepen или каком-либо другом редакторе кода

2. Карточка должна выглядеть так: Фотография в верхнем левом углу карточки, класс сведений справа от фотографии, h2 и кнопка под фотографией. И я понятия не имею, как стилизовать и перемещать их внутри карточки.

Ответ №1:

Я думаю, вам следует использовать класс card из bootstrap. https://getbootstrap.com/docs/4.0/components/card /. Затем вы сможете изменить ширину и высоту карточки по умолчанию, переопределив ее из пользовательского CSS.

Метки: