javascript - Jquery - 在同一行附加元素

Question

我正在尝试在 div 中并排对齐 4 个元素。其中两个是图像，两个是段落标签。

像这样:

[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 元素提供 inline-block 的 display，而是需要为 children 造型。这可以通过
$(".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>