Question

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

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

编辑2：高度问题已经通过同时跨越display: inline-block;来解决，但如下图所示，一切都不顺利。第二个跨度有所推动。 Source

enter image description here

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

Answer 1

我在您的代码中做了一些修改以实现解决方案（例如，添加到timeline_element可拖动）。

我希望您能够看到并验证转换是否会比您更喜欢改变您的项目。我认为有可能以其他方式有相同的行为。

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

在Jquery重叠现有跨度中创建的跨度

1 个答案: