我有一个通过 2 创建卡片的代码，这是代码。
<!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.如何根据卡片大小调整图片高度。
泰斯姆
最佳答案
.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>关于javascript - 创建一个不会调整其内容大小的 Div 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45292407/