मैं कुछ अन्य divs को जोड़ने की कोशिश कर रहा हूं कि उनकी कक्षा बूटस्ट्रैप से "कार्ड" है, और उन्हें एक पंक्ति में मधुमक्खी बना रही है, लेकिन जब वे मधुमक्खी बना रहे हैं तो वे खुद को एक दूसरे के नीचे दिखाते हैं।

मैंने "कार्ड" वर्ग को display: inline-block देकर संपादित करने का प्रयास किया लेकिन इससे काम नहीं होता।

JQuery:

let newCard = document.createElement("div"); 
newCard.className = "card";
$( ".cardsContain" ).append(newCard);

सीएसएस:

.cardsContain{
        width: 79%;
        margin-left: 9%;
        height: 100%;     
      }
      .card{
        display: inline-block;
         background-image: url('img/facebook.png');
         background-size: 100%;
         width: 100px;
         height: 100px;
      }

"cardsContain" वह div है जो प्रत्येक कार्ड को जोड़ता है।

मैं उन्हें एक ही पंक्ति में कैसे दिखाऊं?

0
SahiBalata 3 अक्टूबर 2019, 15:27

2 जवाब

ऐसा लगता है कि आप jQuery का उपयोग कर रहे हैं:

<div id="myDiv" class="test"> 1</div>
<button id="fooBtn">Click me</button>

JQuery:

  var fooBtn = $('#fooBtn');

  fooBtn.on('click', function() {
      let d = document.createElement("div"); 
      $(d).addClass('card')
          .html('hello, world!')
          .appendTo($("#myDiv"));        
  });

सीएसएस:

.card{
    display: inline-block;       
    width: 100px;
    height: 100px;
}
0
StepUp 3 अक्टूबर 2019, 15:49

यहाँ एक डेमो है जो मैंने आपके लिए बनाया है। हर बार 'कार्ड जोड़ें' बटन दबाने पर एक दूसरे के बगल में एक नया कार्ड जुड़ जाएगा।

एचटीएमएल:

<button type="button" class="btn btn-primary" onclick="addCard();">Add Card</button>
<div class="cardsContain row">

जावास्क्रिप्ट:

    var i = 0;
    function addCard(){
        i++;
        let column = document.createElement("div");
        column.className = "col-3 column" + i;
        $( ".cardsContain" ).append(column);

        let newCard = document.createElement("div"); 
        newCard.className = "card";
        newCard.innerHTML = '<div class="card-body">' + '<h5 class="card-title">Card title</h5>' + '<p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>' + '</div>';
        $( ".column" + i ).append(newCard);
     }
0
Pieter Steyn 3 अक्टूबर 2019, 16:09