Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 当向div块中添加更多元素时,插入到div块中的表将水平重叠_Javascript_Html_Css - Fatal编程技术网

Javascript 当向div块中添加更多元素时,插入到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部分。 当我调整窗口大小时,表也在调整大小,这意味着它工作正常

但当表中的元素数量越来越多时,它会在水平方向上扩展,即使只有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>

只要加上这一行,一切都很好

td span{
    float:left;
}

基本上,您需要将添加的
范围保持浮动到
左侧

如何添加更多元素??如果可能,创建一个演示@我添加了预览。请看一看这个预览很难理解!所以,如果您添加代码说明如何将其添加到表中,这将是一件好事!!添加了拖放代码@guruprasadraoaand yea
CSS
也是,因为这是一个
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;
}