Колонка карточек. Как изменить количество карточек в ряду - PullRequest
Новая
       0

Колонка карточек. Как изменить количество карточек в ряду

0 голосов
/ 15 апреля 2020

Я новичок в программировании, особенно в CSS / html. Кто-нибудь из вас знает, как изменить положение карточек. Я хочу, чтобы в одной строке было максимум 3 карты. Как на этом изображении: введите описание изображения здесь

Мой css: 

.card {

  display:inline-table;
  justify-content: space-around;
  grid-template-columns: 300px;
  grid-template-rows: 330px 150px 40px;
  grid-template-areas: "image" "text" "stats";
  border-radius: 7px;
  background: url('/static/images/back.jpg'); 
  box-shadow: 7px 7px 7px rgba(252, 135, 2, 0.9);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  border:3px solid rgb(255, 230, 1)
}


.card-text {
  grid-area: text;
  margin: 40px;

}

.card-text h2 {
  margin-top:20px;
  font-size:30px;


}


.card:hover {
  transform: scale(1.15);
  box-shadow: 10px 315px 15px rgba(53, 243, 5, 0.6);
}


.card { 

  margin-top:20px;
  transition: 0.5s ease;
  cursor: pointer;
  right: 60px;
  width: 290px;
  height: 350rem;
  margin-left:3%;
  margin-bottom: 1%;

}  

.card-imdb-score{
  position: relative;
  margin-top:20px;
  right: center;
  color:  rgb(255, 230, 1)

1 Ответ

0 голосов
/ 15 апреля 2020

Вы можете использовать строки и столбцы bootstrap, например, col-xs-4. Или вы можете использовать ширину 33,33% для всех полей со стилем float слева, если вы хотите сделать это, используя только CSS. Я упомянул оба решения: одно с bootstrap и одно с css. 

.box {
  border: 1px solid black;
  background-color: grey;
  color: white;
  padding: 15px;
}

.my-container {
  margin-left: 20%;
  margin-right: 20%;
}

.my-box {
  width: 33.33%;
  float: left;
}


}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container mt15">
    <h3>using bootstrap 3</h3>
    <div class="row">
      <div class="col-xs-4 box">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-xs-4 box">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-xs-4 box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-xs-4 box">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-xs-4 box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>
  <div class="my-container">
    <h3>Using Css only</h3>
    <div class="box my-box">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="box my-box">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="box my-box">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="box my-box">
      <h3>Column 4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="box my-box">
      <h3>Column 5</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...