創建一個不會調整其內容大小的Div容器
[英]Create a Div Container that will not resize its content
問題描述
我有一個通過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>
這是輸出。
我這里有兩個問題，那就是我的問題。
1.如何提供一個容器，即使我調整瀏覽器的大小，它也將保持2個列卡（div）。
2.如何根據卡片尺寸調整圖像高度。
TYSM
1 個解決方案
解決方案1
1 2017-07-25 05:44:27
.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的大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.