динамическое добавление div в виде столбцов подряд с помощью Zurb Foundation

Уважаемый, пожалуйста, проверьте фрагмент, я добавил display:inline-block в ваш сгенерированный div, это то, что вам нужно?

<div class="tabs-content" data-tabs-content="dy-tabs-2">
  <div id="data1" class="tabs-panel" role="tabpanel" aria-hidden="true" aria-labelledby="data1-label">
    <div id="graph1" class="tabs-panel is-active" role="tabpanel" aria-hidden="false" aria-labelledby="graph1-label">
      <div id="dynRow1">
        <div id="dynDiv21" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: orange; position: relative;"></div>
        <div id="dynDiv22" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: black; position: relative;"></div>
      </div>
    </div>
  </div>
</div>

Добавление строки <div class='row'> у вас есть <div class='column row'>.

Использование столбца и строки в классе создает div шириной в 12 столбцов. Любые новые столбцы div, которые вы добавите, перейдут в новую строку.

Кроме того, вам нужно будет добавить ширину (в блоках сетки), которую вы хотите для своих столбцов (до 12 в строке).

<div class='small-7 medium-3 large-3 columns'>

Этот код показывает div столбца, который будет состоять из 7 ячеек сетки на маленьком экране, 3 на среднем и 3 на большом.

Добавление нового элемента div должно происходить следующим образом... (уведомление classList.add("row")):

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");

Вот пример codepen добавления всего контента для создания строки с несколькими столбцами и использования базовых классов: https://codepen.io/cmodesign/pen/woEpEd

http://foundation.zurb.com/sites/docs/grid.html

Спасибо Крису О за полезные предложения. Я использовал предложения Криса в качестве основы для следующего решения, которое работает.

function staticPlots (selectDataSet) {
/* Function to create row and column div's for each variable in SelectDataSet and then plot
the data for each variable using jqplot line graph.
Temporary data in dataToPlot.
Temporary list of variables in selectVar
*/

// Temporary selection of variables to plot
selectVar = ["R1_","R2_","R3_","R4_","C1_","C2_","C3_","C4_","C5_","C6_","C7_","C8_","C9_","C10_","C11_","C12_"];

/* Create divs and place plots in them
First calculate the number of rows needed with four plots per row
lx is iterator to set unique col ids
*/

var x = selectVar.length;
var y = 4;
var z = Math.ceil(x / y); 
var lx = 0;

for(var r=1; r<=z; r++) {
    var dv = createRowColDivs();
    dv.id = ("newRow"+r);
    dv.classList.add("row");
    document.getElementById("graph1").appendChild(dv);

    var newCol;
    for(var i=1; i<=4; i++) {
        newCol = document.createElement("div");
        newCol.classList.add("small-3");
        newCol.classList.add("columns");
        newCol.id = "col"+lx; 
        dv.appendChild(newCol);
        var names = selectVar[lx];

        // Temporary data for illustration so the database is not used
        dataToPlot = [[1,4,5,6,8,2,3],[2,8,7,6,3,2,3]];
        var plotInDiv2 = simplePlot(newCol.id, dataToPlot, names);
        lx ++;
    }
}
};

Функция createRowColDivs просто создает div строки, чтобы я мог использовать его в других процессах. Можно было бы легко сохранить эти процессы в функции staticPlots.

function createRowColDivs() {

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");
  return(dv);
};

Этот код дает мне макет графика по столбцам, который мне нужен.

Спасибо Крис за фрагмент, который увидел меня на моем пути. Одна вещь, которую мне пришлось изменить в вашем коде, - это прикрепить div строки до того, как я определил div col. мне также потребовалось слишком много времени, чтобы понять, что мне нужно использовать lx для создания уникальных идентификаторов для каждого графика.

Всегда цените предложения по улучшению кода, если кому-то это нужно.