Question

我有一个用2来创建卡片的代码，这是代码。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
   .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          transition: 0.3s;
          width: 450px;
          height: 200px;
          display:inline-block;
          margin: 3px;
        }

         .card:hover {
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
   div#one {
          width: 30%;
          height: 100%;
          float: left;
        }
   div#two {
          margin-left: 30%;
          height: 100%;
   }
   * {
          font-family: 'Lato', sans-serif;
   }     
</style>
</head>
<body onLoad = "LoadAllData()">


<table width = "74%" align = "center">
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td>
<div id = "maincontainer" class = "maincontainer" width = "1000px">
</div>
</td></tr>
</tbody>
</table>

<script>
function LoadAllData(){
google.script.run.withSuccessHandler(GenerateMainTable).getData();
}
function GenerateMainTable(data) {
  var createcard = document.getElementById("maincontainer");
  createcard.innerHTML += '<div class="container" align = "center">' 

  for (var i = 1; i < data.length; i++) {
    var imagelink = data[i][0];
    var brand =  data[i][1];
    
    if (data[i][0] === "") { break; }
    createcard.innerHTML += '<div class="card">' +                                      
                            '<div id="one">' +
                            '<img src="'+ imagelink +'" alt="FELCO Prod." height="95%" width="95%" align = "center">' +
                            '</div>' +
                            '<div id="two">'+
                            data[i][1] + "<br>" +
                            data[i][2] + "<br>" +
                            data[i][3] + "<br>" +
                            data[i][4] + "<br>" +
                            data[i][5] + "<br>" +
                            '</div>' +  
                            '</div>'; 
  }
  createcard.innerHTML += '</div>';
}
</script>

</body>
</html>

＆＃13;

这是输出。

我在这里有2个问题，这就是我的问题。

1.即使我调整浏览器大小，我如何提供一个可以维护2个列卡（div）的容器。

2.如何根据卡片大小调整图像高度。

TYSM

Answer 1

＆＃13;

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
  /* set height to whatever you want */
}

.image {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Rabbit_in_montana.jpg');
  background-position: center;
  background-size: cover;
}

.text {
  padding: 10px;
}

＆＃13;

<div class="cards">
  <div class="card">
    <div class="image"></div>
    <div class="text">
      meow, meow, meow
    </div>
  </div>
  <div class="card">
    <div class="image"></div>
    <div class="text">
      meow, meow, meow
    </div>
  </div>
</div>

＆＃13;

创建一个不会调整其内容大小的Div容器

1 个答案: