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>

Answer 2

你 children 没有显示内联的原因是因为你只在 parent div 而不是它的 children 上设置它。

尝试将此添加到您的 CSS:

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

或者，您可以将每个 child 设置为 display: inline block
像这样：

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

Jquery - 在同一行追加元素

Jquery - appending elements on same line

javascript

appendchild