时间戳

首页 > 解决方案 > 卡片栏。如何更改连续卡片的数量

html - 卡片栏。如何更改连续卡片的数量

问题描述

我是编程行业的新手，尤其是在 css/html 方面。你们中有人知道如何改变卡片的位置吗？我想在 1 行中最多有 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)

标签： htmlcss

解决方案

您可以使用引导程序的行和列，即 col-xs-4。或者，如果您只想使用 CSS 来实现，您可以为所有左侧浮动样式的框使用宽度 33.33%。我已经提到了两种解决方案，一种是使用引导程序，一种是使用 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>

推荐阅读