跨越創建Jquery重疊現有跨度

-1

我有一個跨度的div，其中包含一個按鈕。當你點擊按鈕時，jquery將新的跨度添加到div。跨度應該坐在第一跨度旁邊，但正如你所看到的，新跨度落後於第一跨度。它在源代碼中正確添加，但它們沒有正確排列。跨距也儘可能小，而不是相同的高度，比第一跨度長3倍。爲什麼跨度不像預期的那樣？跨越創建Jquery重疊現有跨度

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

來源

2014-02-06 EasilyBaffled

其實，這是周圍的其他方式。您的其他跨度與jquery附加的跨度重疊，因爲它們絕對由您的css定位。 –

查看z-index –

@KevinB但是如果我刪除位置：絕對大小發生了巨大變化，並將其添加到新跨度可以修復它的大小問題，但不會將其放在原始跨度旁邊; – EasilyBaffled

我已經在你的代碼來實現的解決方案做了一些改動（加入拖動到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%; 
    }

來源

2014-02-07 00:31:20 Nizam

我不確定我瞭解您的更改的目的。雖然我以前從來沒有見過可拖動的，所以非常感謝，它沒有達到我想要的效果，因爲我需要在容器內並排放置兩個跨度，而且我寧願不必每次都將它拖到那裏時間。 – EasilyBaffled

我把可甩掉了。如何改變保證金。你會看看http://jsfiddle.net/nizamabreu/3bExJ/1/請。 – Nizam

是否可以添加多個並排？我問，因爲你的腳本將他們全部刪除（都有timelien_element類） – Nizam

跨越創建Jquery重疊現有跨度

回答

相關問題