Question

我正在使用一些javascript和jquery代码，使用拖放功能将div放在另一个div中。我想将div图像水平放置在彼此相邻的位置并获取它们的值。我有很多div，我是javascript和jquery的新手。在这方面请帮助我。以下是代码：

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

<div id="11" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" name="Driver"><span>Driver 1</span></div>
<div id="12" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" name="Driver"><span>Driver 2</span></div>
<div id="13" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="13"><span>Driver 3</span></div>
<div id="14" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="14"><span>Driver 4</span></div>
<div id="15" draggable="true" ondragstart="drag(event)"> <img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="15"><span>Driver 5</span> &nbsp</div>

如何横向放置div？

Answer 1

你需要给每个孩子一个宽度。
确保父容器具有设置的宽度。
您需要将子div设置为display：inline-block;

设置后，当您删除新元素时，它们应自动对齐。

如果无法在元素上设置隐式宽度，请改用Flexbox。

Answer 2

在OP的上述问题评论中确认为工作答案。

将以下内容添加到CSS中：

div { display: inline-block; }

Answer 3

为要内联的块提供ID
现在在你的css文件中为具有你定义的id的元素创建样式。

.inline{
display : inline-block;
}

<div>
<div class="inline">1st div</div>
<div class="inline">2nd div</div>
<div class="inline">3rd div</div>
</div>

如何拖放div并将它们相邻放置在水平线上？

3 个答案: