試圖根據他們父母的位置來定位孩子

-1

我正在製作一個算法構建器，並在頂部有一個主文本框，當我單擊其下方的「+」時，它將自身的副本添加到下一行。如果那裏已經有一排，它會將其添加到該行。問題是我不想將它添加到下一行，我希望它位於按下「+」符號的位置中心位置。有人請看看我的代碼，並給我一些關於如何解決這個問題的建議。非常感謝。試圖根據他們父母的位置來定位孩子

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Pathway Builder</title> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
    <div id="pathway_builder"> 
     <div class="row" id="row1"> 
      <div class="whole"> 
       <div class="centered_box"> 
        <textarea class="text_field_not_selected"></textarea> 
       </div> 
       <input type="button" value="+" class="add_child not_visable" /> 
      </div> 
     </div> 
    </div> 

    <script src="jQuery.js" type="text/javascript"></script> 
    <script src="selectors.js" type="text/javascript"></script> 
</body> 
</html>

使用Javascript/jQuery的

$('textarea').live('focusin blur', function() { 
    $(this).toggleClass('text_field_not_selected'); 
}); 

$('.whole').live('mouseenter mouseleave', function() { 
    $(this).find('.add_child').toggleClass('not_visable'); 
}); 


$(document).ready(function() { 
    $('.add_child').live({ 
     click: function() { 
      var new_row = '<div class="row"></div>' 
      var new_child = '<div class="whole"><div class="centered_box"><textarea class="text_field_not_selected"></textarea></div><input type="button" value="+" class="add_child not_visable" /></div>' 
      if ($(this).parents('.row').next().length == 0) { 
       $(this).parents('.row').after(new_row); 
       $(this).parents('.row').next().html(new_child).css('position-x', ''); 
      } else { 
       $(this).parents('.row').next().append(new_child); 
      } 
     } 
    }); 
});

CSS

body { 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
textarea { 
    width: 4em; 
    height: 1em; 
    overflow: hidden; 
} 

textarea:focus { 
    outline: none; 
    text-align: center; 
    resize: both; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
.text_field_not_selected { 
    text-align: center; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    box-shadow: 0px 3px 5px #444; 
    -moz-box-shadow: 0px 3px 5px #444; 
    -webkit-box-shadow: 0px 3px 5px #444; 
    resize: none; 
} 
.pathway_builder { 
    text-align: center; 
} 
.whole { 
    text-align: center; 
    display: inline-block; 
    background-position-x: 100px; 
} 
.centered_box { 
    padding: 10px; 
    padding-bottom: 0px; 
} 

.add_child { 
} 

.not_visable { 
    visibility: collapse; 
} 
.row { 

}

來源

2012-03-26 mharris7190

我建議你變成一個更一般的問題，這個如「如果我有這樣的HTML，我怎麼了XXX的div下YYY時中心我添加它「。就目前而言，您要求我們完全瞭解您的應用，以回答特定於應用的問題。 – jfriend00 2012-03-26 16:21:39

你的意思是垂直排列嗎？ – w3uiguru 2012-03-26 16:22:31

親愛的看到我的回答，讓我知道如果我滯後一些，所以我可以根據您的需要更改代碼。 – w3uiguru 2012-03-26 16:28:49

試圖根據他們父母的位置來定位孩子

回答

相關問題