通过javascript在html中添加卡片
[英]Add cards in html via javascript
问题描述
I've added 3 cards through a loop.
我通过循环添加了 3 张卡片。 My problem here is that I want to put these 3 cards together, not below each other.我的问题是我想把这 3 张卡放在一起，而不是放在一起。 I want them to be ordered horizontally.我希望它们水平排列。
arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-4 col-sm-6 col-xs-12"> <div id="test"></div> </div>
9 个解决方案
解决方案1
1 2019-06-26 06:50:51
Try below:试试下面：
#test
{
display:flex;
}
解决方案2
1 2019-06-26 06:55:18
use this css for your div test将此 css 用于您的 div test
#test
{
position: absolute;
height: 40px;
width: 250px;
background: white;
display: flex;
}
a working demo: https://jsfiddle.net/athulmathew/hdwbf5n2/6/一个工作演示： https : //jsfiddle.net/athulmathew/hdwbf5n2/6/
解决方案3
1 2019-06-26 06:59:07
By default, Div adds children vertically due to default block property of Div, if you want to add items in div in horizontal direction then change the display property to flex with flex-direction should be set to row(it is by default row so you can ignore it).默认情况下，由于 Div 的默认块属性，Div 垂直添加子项，如果您想在水平方向在 div 中添加项目，则将显示属性更改为 flex，将 flex-direction 设置为行（默认情况下为行，因此您可以无视）。 because you are using bootstrap here so you can also use the row class here因为您在这里使用引导程序，所以您也可以在这里使用row类
<div id="test" class="row"></div>
or或者
<div id="test" style="display:flex"></div>
解决方案4
0 2019-06-26 06:50:14
您需要像这样在 div 中添加样式：-
<div id="test" style = "display: block"></div>
解决方案5
0 2019-06-26 07:00:43
I just modified your code as below:我刚刚修改了你的代码如下：
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="test" class="row">
</div>
</div>
<script>
var arr = [
{ "Name": "Peter", "Job": "Programmer" },
{ "Name": "John", "Job": "Programmer" },
{ "Name": "Kevin", "Job": "Scientist" },
];
$.each(arr, function (i) {
var templateString = '<div class="col-md-4"><div class="card mb-2 box-shadow"><img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"><div class="card-body"><h5>' + arr[i].Name + '</h5></p></div></div></div>';
$('#test').append(templateString);
})
</script>
Maybe that's what you want.也许这就是你想要的。
解决方案6
0 2019-06-26 07:01:31
Try with below code.
<script>
arr = [
{"Name":"Peter","Job":"Programmer"},
{"Name":"John","Job":"Programmer"},
{"Name":"Kevin","Job":"Scientist"},
];
$.each(arr, function(i){
var templateString = '<div class="col-md-4 col-sm-6 col-xs-12"><div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>'+arr[i].Name+'</h5> </p></div> </div></div>';
$('#test').append(templateString);
})
</script>
<div class="row">
<div id="test"></div>
</div>
解决方案7
0 2019-06-26 07:07:32
Simply solution is using proper usage of bootstrap grid.简单的解决方案是正确使用引导网格。 You could have used row class for your <div id="test"> and append <div class="col-4"> for having three cards in row.您可以为<div id="test">使用row类并附加<div class="col-4">以将三张卡片排成一行。 Below is the working snippet for the same.以下是相同的工作片段。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row" id="test"></div> </div> <script> arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="col-sm-4 card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body p-0"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); }) </script> </body> </html>
解决方案8
0 2019-06-26 07:15:12
You can do that by just adding the class row to your test div: <div id="test" class="row"></div>您只需将类row添加到您的测试 div 中即可： <div id="test" class="row"></div>
Here is the full snippet:这是完整的片段：
arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { let templateString = '<div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); })
/* not relevant only for visibility within snippet*/ .card { width: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-4 col-sm-6 col-xs-12"> <div id="test" class="row"></div> </div>
解决方案9
0 2020-07-27 20:27:46
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row" id="test"></div> </div> <script> arr = [{ "Name": "Peter", "Job": "Programmer" }, { "Name": "John", "Job": "Programmer" }, { "Name": "Kevin", "Job": "Scientist" }, ]; $.each(arr, function(i) { var templateString = '<div class="col-sm-4 card mb-2 box-shadow"> <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"> <div class="card-body p-0"> <h5>' + arr[i].Name + '</h5> </p></div> </div>'; $('#test').append(templateString); }) </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.