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

问题描述：

<!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>

，这里是输出。

我在这里有2个问题和多数民众赞成我的问题。

1.我可以提供一个容器，即使在调整浏览器大小时也会保留2列卡（div）。

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

TYSM

答

.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; 
 
}

<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>

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

相关推荐