Befüllen Div von links nach rechts

Ich habe einen Code, der ein Div basierend auf der Anzahl meiner Daten auffüllt und hier ist mein Code.Befüllen Div von links nach rechts

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .card { 
 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
     transition: 0.3s; 
 
     width: 40%; 
 
     height: 180px; 
 
    } 
 
    
 
    .card:hover { 
 
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
    } 
 
    
 
    .container { 
 
     padding: 2px 16px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body onLoad="LoadAllData()"> 
 

 
    <div id="maincontainer" class="maincontainer"> 
 
    </div> 
 

 
    <script> 
 
    function LoadAllData() { 
 
     google.script.run.withSuccessHandler(GenerateMainTable).getData(); 
 
    } 
 

 
    function GenerateMainTable(data) { 
 
     var createcard = document.getElementById("maincontainer"); 
 

 
     for (var i = 1; i < data.length; i++) { 
 

 
     var imagelink = data[i][0] 
 
     //alert(data[i][0]); 
 
     createcard.innerHTML += '<div class="container">' + 
 
      '<div class="card">' + 
 
      imagelink + 
 
      '</div>' + 
 
      '</div>'; 
 
     } 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

Dieser Code funktioniert, und es entsteht ein div den ganzen Weg hinunter meine Frage, wie ich die div von links nach rechts und so weiter füllen können. wie diese

Quelle

2017-07-24 Nardong Bagsik

Was genau meinst du mit links nach rechts aussehen würde? –

Bitte erklären 'von links nach rechts'? –

Sie können CSS-Eigenschaft float hinzufügen: Links zum Container div oder die Karte div –

ich denke, das ist das, was Sie brauchen.

.card { 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
      transition: 0.3s; 
      width: 40%; 
      height: 180px; 
      float:left; 
      margin: 2px; //For Adding space between divs 
     } 

     .card:hover { 
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
     } 

     .container { 
      padding: 2px 16px; 

     }

Quelle

2017-07-24 07:32:30

Sie können CSS Stil für diesen Einsatz -

.yourPopulatedDiv{ 
    display:inline-block; 
    float:left; 
    }

Versuchen Sie, diese Art in Ihrem poppulated div kann es Ihr Problem lösen.

in Ihrem Fall -

.card { 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
     transition: 0.3s; 
     width: 40%; 
     height: 180px; 
     display:inline-block; 
     float:left; 
     margin-left:10px; 
    }

Quelle

2017-07-24 07:33:12 weBBer

Ich habe Ihren Code versucht. kannst du bitte platz zwischen divs schaffen? –

@paulpagente Ich habe meinen Code für Sie aktualisiert. Überprüfen Sie, dass ich 'margin-left: 10px' für Leerzeichen verwendet habe, wenn Sie möchten, können Sie'% 'auch darin verwenden. wenn seine nützliche Markierung als Antwort, ty ..! – weBBer

Tysm Sir :) plus 1 –

Wenn ich Sie richtig verstehe, suchen Sie Sie zeigen von links nach rechts auf einer einzigen Zeile div gemäß der Breite der es Eltern. Wenn ja, versuchen Sie bitte, die untergeordneten Elemente auf "float: left" und mit: 100% zu schweben. Denken Sie daran, dem Elternteil eine feste Breite zu geben.

Grüße, Sijo Jose

Quelle

2017-07-24 07:33:51

außerhalb der Schleife Nehmen Sie div-Container.

'<div class="container">'

Dann CSS-Klasse für die Container hinzufügen, wie

.container { 
    display:inline-block; 
    float:left; 
}

Ihre Funktion wie

function GenerateMainTable(data) { 
    var createcard = document.getElementById("maincontainer"); 
    createcard.innerHTML += '<div class="container">' 

    for (var i = 1; i < data.length; i++) { 

    var imagelink = data[i][0] 
    createcard.innerHTML += '<div class="card">' + imagelink + '</div>'; 

    } 
    createcard.innerHTML += '</div>'; 
}

Quelle

2017-07-24 07:41:36 KKK

Befüllen Div von links nach rechts

Antwort

Verwandte Themen