Javascript 当向div块中添加更多元素时,插入到div块中的表将水平重叠
我在中声明的表中添加了一些带有拖放选项的文本 具有正确样式的代码的div部分。 当我调整窗口大小时,表也在调整大小,这意味着它工作正常 但当表中的元素数量越来越多时,它会在水平方向上扩展,即使只有66.67%的窗口提供给该div元素 这是我的密码:Javascript 当向div块中添加更多元素时,插入到div块中的表将水平重叠,javascript,html,css,Javascript,Html,Css,我在中声明的表中添加了一些带有拖放选项的文本 具有正确样式的代码的div部分。 当我调整窗口大小时,表也在调整大小,这意味着它工作正常 但当表中的元素数量越来越多时,它会在水平方向上扩展,即使只有66.67%的窗口提供给该div元素 这是我的密码: <div class = "container"> <div class="row" > <div class="col-md-8" >
<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>
只要加上这一行,一切都很好
td span{
float:left;
}
基本上,您需要将添加的
范围保持浮动到左侧
如何添加更多元素??如果可能,创建一个演示@我添加了预览。请看一看这个预览很难理解!所以,如果您添加代码说明如何将其添加到表中,这将是一件好事!!添加了拖放代码@guruprasadraoaand yeaCSS
也是,因为这是一个CSS
issueAnytime!!快乐编码…)
.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; }
td span{
float:left;
}