插入div块的表格在添加更多元素时会水平重叠
我在声明的表中添加了一些带有DRAG和DROP选项的文本 代码的div部分具有适当的样式。 当我调整窗口大小时，表格也会调整大小，这意味着它工作正常。
但是当表格中的元素数量越来越多时，即使只有66.67％的窗口被提供给该div元素，它也会在水平方向上扩展。
这是我的代码：
<div class = "container">
<div class="row" >
<div class="col-md-8" >
<h1 >Selected Courses</h1>
<table width = "100%" order="5" cellspacing=0 cellpadding=5>
<tr>
<td width="100%" id="red" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
<span draggable="true" id="lt1" ondragstart="dragIt(this, event)"><rc>RC</rc></span>
</td>
</tr>
</table>
</div>
<div class="col-md-4" >
<h1 >Select Your Courses</h1>
<table width = "100%" border="5" cellspacing=0 cellpadding=5>
<tr>
<td valign="bottom" align="left" id="holder" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
<span draggable="true" id="lt" ondragstart="dragIt(this, event)"><cse>CSE114</cse></span>
<span draggable="true" id="srv" ondragstart="dragIt(this, event)"><ams>AMS151 </ams></span>
<span draggable="true" id="mf" ondragstart="dragIt(this, event)"><cse class = "tooltip">CSE214<span class = "classic"><sp>An extension of programming </sp>methodology to data storage and manipulation on complex data sets. Topics include: programming and applications of data structures; stacks, queues, lists, binary trees, heaps, priority queues, balanced trees and graphs. Recursive programming is heavily used. Fundamental sorting and searching algorithms are examined along with informal efficiency comparisons.</span></cse></span>
<span draggable="true" id="ids" ondragstart="dragIt(this, event)"><wrt>WRT101</wrt></span>
<span draggable="true" id="pc" ondragstart="dragIt(this, event)"><ams>PHY131</ams></span>
<span draggable="true" id="ltt" ondragstart="dragIt(this, event)"><ams>PHY133</ams></span>
<span draggable="true" id="srvv" ondragstart="dragIt(this, event)"><ams>AMS161</ams></span>
<span draggable="true" id="idss" ondragstart="dragIt(this, event)"><cse>CSE215</cse></span>
<span draggable="true" id="pcc" ondragstart="dragIt(this, event)"><ams>PHY132</ams></span>
<span draggable="true" id="pccc" ondragstart="dragIt(this, event)"><ams>PHY134</ams></span>
<span draggable="true" id="ids1" ondragstart="dragIt(this, event)"><wrt>WRT102</wrt></span>
</td>
</tr>
</table>
</div>
</div>
</div>
元素从右框添加到左框。在这种情况下，当没有元素在左框中获得更多时，它也会获得正确的框位置。
以下是用于拖放的代码。
<script>
function dragIt(target, e) {
e.dataTransfer.setData('SpanImg', target.id);
}
function dropIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
function trashIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
removeElement(id);
e.preventDefault();
}
function removeElement(id) {
var d_node = document.getElementById(id);
d_node.parentNode.removeChild(d_node);
}
</script>
CSS代码
.title {
color: rgb(0, 207, 255);
}
.description { /* description is a class */
color: rgb(0, 0, 0);
max-width: 705px; /*color attribute*/
}
.screenshot { /* description is a class */
color: red;
max-width: 460px; /*color attribute*/
}
.app {
display: -webkit-flex;
display: flex;
}
text {
font-size: 10px;
}
/*
* {
outline: 1px solid red !important;
}
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
table, td
{
border-color: #e6e6e6;
border-style: solid;
}
cse {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(192,0,0,1);
border-radius: 5px;
}
ams {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(128,100,162,1);
border-radius: 5px;
}
wrt {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(155,187,89,1);
border-radius: 5px;
}
rc {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(79,129,189,1);
border-radius: 5px;
}
sp{
font-size: 1.6em;
}
cse:hover {
background-color: rgba(192,0,0,0.4);
font-size: 2em;
}
wrt:hover {
background-color: rgba(155,187,89,0.4);
font-size: 2em;
}
ams:hover {
background-color: rgba(128,100,162,0.4);
font-size: 2em;
}
rc:hover {
background-color: rgba(79,129,189,0.4);
font-size: 2em;
}
.tooltip {
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -600em;
position: absolute;
}
.tooltip:hover span {
border-radius: 10px 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 3em;
z-index: 99;
margin-left: -90px;
width: 300px;
font-size: 0.4em;
color: white;
background-color: DeepSkyBlue;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
1 个答案:
答案 0 :(得分：0)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？