堆棧內存溢出
  簡體   English   中英

通過javascript在html中添加卡片

[英]Add cards in html via javascript

 原文  2019-06-26 06:46:31  5   9    javascript/ html/ bootstrap-4

問題描述

我通過循環添加了 3 張卡片。 我的問題是我想把這 3 張卡放在一起，而不是放在一起。 我希望它們水平排列。 

 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

試試下面：

#test
{
  display:flex;
}

解決方案2
 1  2019-06-26 06:55:18

將此 css 用於您的 div test

#test
{
 position: absolute;
  height: 40px;
  width: 250px;
  background: white;
  display: flex;
 }

一個工作演示： https : //jsfiddle.net/athulmathew/hdwbf5n2/6/

解決方案3
 1  2019-06-26 06:59:07

默認情況下，由於 Div 的默認塊屬性，Div 垂直添加子項，如果您想在水平方向在 div 中添加項目，則將顯示屬性更改為 flex，將 flex-direction 設置為行（默認情況下為行，因此您可以無視）。 因為您在這里使用引導程序，所以您也可以在這里使用row類

 <div id="test" class="row"></div>

或者

<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

我剛剛修改了你的代碼如下：

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

也許這就是你想要的。

解決方案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

簡單的解決方案是正確使用引導網格。 您可以為<div id="test">使用row類並附加<div class="col-4">以將三張卡片排成一行。 以下是相同的工作片段。 

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

您只需將類row添加到您的測試 div 中即可： <div id="test" class="row"></div>

這是完整的片段： 

 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.

相關問題 通過 JavaScript 問題渲染 HTML 卡 HTML 和 Javascript 搜索引導卡 通過javascript在html中添加類（奇數和偶數）？ 通過DOM JavaScript操作添加HTML ID 通過javascript添加HTML控件 如何將類添加到 Html 或 Javascript 中的元素？ 通過Javascript將自定義屬性添加到HTML元素 從javascript數組生成動態html卡 如何通過JavaScript動態添加HTML代碼中的onclick事件？ 使用 JavaScript 為選定的產品卡添加按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM