在 Jquery 中创建的 Span 与现有 Span 重叠答案

【问题标题】：Spans Created in Jquery Overlap Existing Span在 Jquery 中创建的 Span 与现有 Span 重叠
【发布时间】：2014-03-04 03:46:24
【问题描述】：

我有一个带有跨度的 div，其中包含一个按钮。当您单击按钮时，jquery 会向 div 添加一个新的 span。跨度应位于第一个跨度旁边，但正如您所见，新跨度位于第一个跨度后面。它已正确添加到源代码中，但它们没有正确排列。跨度也尽可能小而不是相同的高度，并且比第一个跨度长3倍。为什么 span 没有按预期运行？

编辑 1： 好的，所以将它们设为 position: absolute 意味着它们不再处于流程中。所以删除它可以修复定位。但它并没有解决为什么跨度最小的问题，即使我指定了高度。 Source

编辑 2： 高度问题已通过制作两个跨度 display: inline-block; 得到解决，但如下图所示，一切都不是很好。有什么东西推动了第二个跨度。 Source

HTML：

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>

    </head>
    <body>
        <div class="container">
            <span class="menu">
                <button class="add_button">+</button>
                <button class="minimize_button">m</button>
            </span>
        </div>
    </body>
</html>

CSS：

  /*----------------*/
 /*----Main Page---*/
/*---------- -----*/
.container {
    background-color:grey;
    position:relative;
    height:20%;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}
.menu {
    background-color:lightblue;
    position:absolute;
    height:90%;
    width: 60px;
    margin: 1%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    border-radius:5px;
}
button {
    background-color:blue;
    height: 50px;
    width: 50px;
    margin: 5px;
    font-size: 20px;
    color: white;
    border: 0px;
    border-radius:7px;
}

 /*-----------------*/
 /*Timeline Element*/
/*----------------*/
.timeline_element {
    height:90%;
    width: 360px;
    background-color:red;
    border: 2px black;
    margin: 1% 0%;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    border-radius:5px;

}
.text_area {
    height: 50%;
    width: 50%;
}

JS：

$(function(){
$(".add_button").click(add_timeline_element);

function add_timeline_element() {
    debugger;
    var timeline_element = $('<span></span>').addClass('timeline_element')
    $('<button>/', {
      text: '-',
      click: function() {(".timeline_element").remove();}
    }
    ).appendTo(timeline_element);
    var text_area = document.createElement("textarea").className ="text_area";
    $(timeline_element).append(text_area);
    $(".menu").after(timeline_element);
}
});

【问题讨论】：

其实恰恰相反。您的其他跨度与 jquery 附加的跨度重叠，因为它们绝对由您的 css 定位。
查看 z-index
@KevinB 但如果我删除 position: absolute ，大小会发生巨大变化，并将其添加到新跨度可解决其大小问题，但不会将其放置在原始跨度旁边；
@ChristopherMarshall 据我所知，z-index 无法解决左右问题。
@EasilyBaffled 这是意料之中的。但是，事实依然存在。绝对定位就是它发生的原因。

标签： javascript jquery css html

【解决方案1】：

我已经对您的代码进行了一些修改以实现解决方案（例如，将可拖动添加到时间线元素）。

我希望您查看并验证这些转换对您的项目的影响是否超出了您的预期。我认为有可能以其他方式具有相同的行为。

FIDDLE

HTML：

    <div class="container">&nbsp;
        <span class="menu">
            <button class="add_button">+</button>
            <button class="minimize_button">m</button>
        </span>
    </div>

JS：

$(".add_button").click(add_timeline_element);

function add_timeline_element() {

    var timeline_element = $('<span></span>');
    $(timeline_element).addClass('timeline_element');

    $('<button/>', {
      text: '-',
      click: function() {$(".timeline_element").remove();}
    }).appendTo(timeline_element);

    var text_area = document.createElement("textarea");
    $(text_area).className ="text_area";

    $(text_area).appendTo(timeline_element);
    $(timeline_element).draggable({containment: '.container' });

    $(".menu").after(timeline_element);
}

CSS：

     /*----------------*/
     /*----Main Page---*/
    /*---------- -----*/
    .container {
        background-color:grey;
        position:relative;
        height:300px;
        width: 100%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        z-index:0;
    }
    .menu {
        background-color:lightblue;
        position:absolute;
        height:90%;
        width: 60px;
        margin: 1%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        border-radius:5px;
    }
    button {
        background-color:blue;
        height: 50px;
        width: 50px;
        margin: 5px;
        font-size: 20px;
        color: white;
        border: 0px;
        border-radius:7px;
    }

     /*-----------------*/
     /*Timeline Element*/
    /*----------------*/
    .timeline_element {
        height:70%;
        width: 360px;
        background-color:red;
        border: 2px black;
        margin: 1% 0%;
         -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        border-radius:5px;
        display: block;
        z-index:1000;
    }
    .text_area {
        height: 50%;
        width: 50%;
    }

【讨论】：

我不确定我是否理解您所做更改的目的。虽然我以前从未见过可拖动的，所以谢谢你，它没有达到我想要的效果时间。
我把 drggable 取下来了。改变边距怎么样。你会看jsfiddle.net/nizamabreu/3bExJ/1请。
是否可以并排添加多个跨度？我问是因为你的脚本正在删除它们（都有 timelien_element 类）