如何在<p>放置时调整元素的大小

Question

我有一个代码，其中有8个带有类名框的框。每个都有CCD_ 1元素，可以将其拖放到右侧的boxright中。

有没有一种方法可以将所有8个丢弃的p元素都包含在boxright中

即is there a way i can reduce the size ofpondrop so that 8 elements can fit inside the boxright?

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

.box {
width: calc(23.3% - 6px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #73c6b6;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.boxright {
position: absolute;
top: 27.3vh;
left: 50.98vw;
width: 3.0vw;
height: 40.0vh;
cursor: pointer;
border: 2px solid black;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.boxright p {
font-size: calc(2vw + 10px);
}
.boxleft p {
font-size: calc(2vw + 10px);
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}

<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="box1">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
</div>
<div class="box" id="box2">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
</div>
<div class="box" id="box3">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
</div>
<div class="box" id="box4">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
</div>
</div>
<div id="2container">
<div class="box" id="box5">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
</div>
<div class="box" id="box6">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
</div>
<div class="box" id="box7">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
</div>
<div class="box" id="box8">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
</div>
</div>
</div>
</div>
<div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>

Answer 1

在.boxright p中删除p的边距并将其高度设置为5vh

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

.box {
width: calc(23.3% - 6px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #73c6b6;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.boxright {
position: absolute;
top: 27.3vh;
left: 50.98vw;
width: 3.0vw;
height: 40.0vh;
cursor: pointer;
border: 2px solid black;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.boxright p {
font-size: calc(2vw);
height: 5vh;
background: royalblue;
margin: 0;
color: white;
}
.boxleft p {
font-size: calc(2vw + 10px);
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}

<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="box1">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
</div>
<div class="box" id="box2">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
</div>
<div class="box" id="box3">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
</div>
<div class="box" id="box4">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
</div>
</div>
<div id="2container">
<div class="box" id="box5">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
</div>
<div class="box" id="box6">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
</div>
<div class="box" id="box7">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
</div>
<div class="box" id="box8">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
</div>
</div>
</div>
</div>
<div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>