个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
对于我的元素，我使用 Groovyscript 创建了一个比较脚本来比较 2 个不同的文件。在 Groovyscript 中，我添加了使用 CSS 的 HTML，并最终添加了 Bootstrap(任何版本)。
我已经设法让我的计数器在我的 HTML 页面顶部有一个标题，但它不是动态/响应的。当您更改页面的宽度和高度时，布局会被破坏。我读到 Bootstrap/CSS 可以帮助在分辨率发生变化时重新排列页面。因此，我被吸引使用卡片。效果很好，但是当页面变大或变小时，布局仍然关闭。
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' crossorigin='anonymous'>
<title>GroovyCardsBootstrap</title>
<style>
h{color:#86BEB6; font-size:50px;}
* {box-sizing: border-box;}
body {font-family: Arial,Helvetica, sans-serif;}
/* Float 4 columns side by side
.column4 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:5px;}
.column3 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:205px;}
.column2 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:405px;}
.column1 {float: left;width: 15%;padding: 0 20px;position:absolute; top:10px; right:605px;}*/
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -3px;}
/* Clear floats after the columns */
.row:after {
content: '';display: table;clear: both;
}
.card {
display:inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
}
.card-group [class*='col-']{
float:none;}
</style>
</head>
<body>
<div class='card-group'>
<div class='card'>
<div class='card-block'>
<img class='card-text' src='FODBosa.png' alt='FodBosa.png' width='400' height='150' />
</div>
</div>
<div class='card' style='flex-grow: 3'>
<div class='card-block'>
<span class='card-text' style='padding:0 5px'>Text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span><span class='card-text' style='padding:0 5px'>More text 2</span>
</div>
</div>
</div>
<h>Test results comparison KBO with PDC</h>
<div style = 'border:1px solid black; border-collapse: collapse;'>
<p>Automated tests are executed in ReadyAPI. These are the results of the comparison on the responses between KBO and PDC</p>
</div>"outputFile.append "<div class='card-group'><div class='card' style='background-color:black; color:white;'><div class='card-block'> <h3>Not found in KBO</h3> <p>" +notInPDCCounter+ "</p></div></div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#DA4747;'><div class='card-block'> <h3>Failed - PDC not same as KBO</h3> <p>" +hasDifferences+ "</p></div> </div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#ff8080;'><div class='card-block'> <h3>Total lines read</h3> <p>"+ failed + "</p></div></div>"
outputFile.append "<div class='card-group'><div class='card' style='background-color:#52DA69;'><div class='card-block'> <h3>Passed - Info is in PDC</h3> <p>" +(totalTotal-failed)+ "</p></div> </div> </div>"outputFile.append 在 html 页面开头的段落下方为我提供了漂亮的放置框(我需要将代码插入 HTML 以便您能够看到它，所以结果不好)但我实际上我希望我在一开始创建的卡片本身中有这些答案(请参阅 
旁边的答案。)我怎么能把用 groovy 脚本生成的计数器的结果放在所有中间这个，因此只在最后给出结果，请在右上角的卡片中？提前致谢。
最佳答案
不确定我是否做对了:
您正试图在页面的右上角并排显示 4 张卡片？您希望这些卡片在不同的 vw 下响应吗？
我不熟悉 Groovy，但如果您可以将卡片包装到一个 div 中(或通过 id 等定位 div)，那么您可以使用 CSS Grid(用于响应)创建一个 4 列网格并设置每列的宽度，因此随着宽度变小，它们会进入新行。
希望对您有所帮助!
关于html - 如何将计数器的结果放入 html 页面顶部的卡片中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55573911/
25
4
0
我有一个卡片列表: hand = ["KC", "QC", "4C", "0S"] 而且我总是想获得排名最高的卡片，就像在这个列表中一样 rank_cards = ["2", "3",
我正在使用 Opencv 2.4.3，我的显卡是 ATI，但我一直在阅读 CUDA 启用了 Nvidia，这是否意味着只要我有 ATI 显卡我就不能使用 gpu 功能？ 最佳答案 的确，CUDA 技术
在 Android 中实现 Stripe 时，有一个 CardInputWidget 给你一个 Card 对象，然后你得到一个token 来自 Stripe API 使用该卡，最后您将该 token
我是一名优秀的程序员,十分优秀！