Question

我正在创建一个可以放置到位的拼图。 div（放置图像的空占位符）和图像片段都是相同的大小。然而，在将图像放入div中时，div突然变大，向高度增加约5px。有关可能导致此问题的任何建议吗？提前谢谢。

JS：

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));
}

PHP：

<div id="mMiddle">
  <table class="pixTable">
    <?php
    for($index = '1'; $index <= '16'; $index++){
        if($index == '1')
            echo "<tr class='picRow'>
                <td class='droppable pixCell' id='pixCell".$index."'
                ondrop='drop(event)' ondragover='allowDrop(event)'>
                </td>";
        else{
            if($index % '4' == '0')
                echo "<td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td></tr>";
            else if($index % '4' == '1')
                echo "<tr class='picRow'>
                    <td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td>";
            else
                echo "<td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td>";
        }
    } 
    ?>
  </table>
</div>
<div id="mRight">
    <div class="pixTable droppable" ondrop='drop(event)' ondragover='allowDrop(event)'>
        <?php
        for($index = '1'; $index <= '16'; $index++){
            if($index % '4' == '0')
                echo "<img class='draggable' id='mj".$index."' 
                    src='images/task3/mj".$index.".PNG'
                    draggable='true' ondragstart='drag(event)'><br>";
            else
                echo "<img class='draggable' id='mj".$index."' 
                    src='images/task3/mj".$index.".PNG'
                    draggable='true' ondragstart='drag(event)'>";
        } 
        ?>
    </div>
</div>

CSS：

.pixCell{
width: 99px;
height: 81px;
padding: 0;
margin: 0;
border: 2px solid black;
background: white;

}

.pixTable{
    width: 396px;
    height: 326px;
    border-collapse:collapse;
    border-spacing: 0px;
    background: white;
    float: left;
}

.pixImg, .draggable{
    width: 99px;
    height: 81px;
}

Answer 1

没有错误的例子很难说问题在哪里，但也许是由图像引起的，因为它们实际上没有“浮动”容器。

尝试向他们添加 float：left css属性，看看是否有帮助。

物品掉落后，Div的大小会增加

1 个答案: