Jquery - добавление элементов в одну строку

Question

Я пытаюсь выровнять 4 элемента рядом в div. Два из них являются изображениями, а два - тегами абзаца.

как это:

[img1] - [p1] - [img2] - [p2]

Ниже мой код. Тем не менее, элементы отображаются вертикально друг на друга. Я хочу, чтобы они были на одной линии. Как я могу это сделать?

var p1 = document.createElement("p");
var p2 = document.createElement("p");
var t1 = document.createTextNode("A");
var t2 = document.createTextNode("B");

p1.appendChild(t1);
p2.appendChild(t2);

var parent_div = document.createElement("div");
parent_div.classList.add("my_div");
$(".my_div").css('display','inline-block');
//$(".my_div").css('float','left');

var img1 = document.createElement("img");
var img2 = document.createElement("img");
img1.src = "image1.png";
img2.src = "image2.png";

parent_div.appendChild(img1);
parent_div.appendChild(p1);
parent_div.appendChild(img2);
parent_div.appendChild(p2);

Answer 1

Вместо того, чтобы дать .my_div элемент а display из inline-block, вы должны дать детям стиль. Это может быть сделано с
$(".my_div img, .my_div p").css('display', 'inline-block'), Также обратите внимание, что это должно быть применено после добавления элемента на страницу!

Или, в качестве альтернативы, это можно сделать в CSS с помощью:

.my_div > img, .my_div > p {
  display: inline-block;
}

Что можно увидеть в следующем примере:

var p1 = document.createElement("p");
var p2 = document.createElement("p");
var t1 = document.createTextNode("A");
var t2 = document.createTextNode("B");

//p1.appendChild(pos_percent);
//p2.appendChild(neg_percent);
p1.innerHTML = 'a';
p2.innerHTML = 'b';

var parent_div = document.createElement("div");
parent_div.classList.add("my_div");

var img1 = document.createElement("img");
var img2 = document.createElement("img");
img1.src = "http://placehold.it/100";
img2.src = "http://placehold.it/100";

parent_div.appendChild(img1);
parent_div.appendChild(p1);
parent_div.appendChild(img2);
parent_div.appendChild(p2);

// Sample
var example = document.getElementById('example');
example.appendChild(parent_div);

$(".my_div img, .my_div p").css('display', 'inline-block');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="example"></div>

Answer 2

Причина, по которой вы, дети, не отображаете inline, заключается в том, что вы установили его только для родительского div, а не для его дочерних элементов.

попробуйте добавить это в свой CSS:

.parent_div{
    display: flex;
    flex-direction: row;
    justify-content: centre/space-around/space-between;
}

или, в качестве альтернативы, вы можете установить для каждого ребенка display: inline block
как это:

parent_div.appendChild(img1).classList.add("my_div");