JQuery使用動態創建的子div時 - float：left丟失子div

您好我嘗試了很多不同的方法來嘗試解決這個問題，但我希望得到您的幫助。JQuery使用動態創建的子div時 - float：left丟失子div

我有一個css格式化但空的部分，我試圖動態創建使用JQuery時，單擊按鈕時的佈局。

這是我的HTML部分：

<SECTION ID="Section_Article_1"> 
<P CLASS="header">Title</P> 
</SECTION>

這是我的腳本：

$(document).ready(function(){ 
     $("#btn1").click(function(){  
      var topStyles = { 
      backgroundColor : "#69830E", 
      color: "#ffffff", 
      fontSize: 20, 
      fontWeight: "", 
      textAlign: "center", 
      marginTop: "-20px", 
      }; 
      $("#Section_Article_1").append("<div id = 'title'><p>Header</p></div>"); 
      $("#title").css(topStyles); 

      var leftColumn = { 
      backgroundColor : "#ffffff", 
      width: "30%", 
      height: "500px", 
      color: "#000000", 
      fontSize: 18, 
      fontWeight: "", 
      marginTop: "-20px", 
      float:left, 
      paddingLeft: "2px", 
      }; 
      $("#Section_Article_1").append("<div id = 'left'><p>Left Column</p></div>"); 
      $("#left").css(leftColumn); 

      var rightSection = { 
      backgroundColor : "#000000", 
      width: "70%", 
      height: "500px", 
      color: "#ffffff", 
      fontSize: 18, 
      fontWeight: "", 
      textAlign: "center", 
      marginTop: "-18px" 
      }; 
      $("#Section_Article_1").append("<div id = 'right'><p>Right Section</p></div>"); 
      $("#right").css(rightSection); 

     }); 
    });

當我運行的功能，我的「稱號」分區，因爲我希望它看起來不錯，但其他兩個不在那裏。當我從第二個div中刪除「float：left」時，它們都出現，但是顯示爲一個在另一個之上。

我試圖讓我的標題欄顯示在頂部，然後我的其他兩個在它下面我的第二個div「左」顯示在左邊，第三個div「右」顯示在右邊「左」

我試着設置我的包含部分顯示：內聯，但它也沒有工作。

如何顯示我的「左」div和「right」div而不會消失？由於

來源

2013-05-02 Kyohei Kaneko

我們似乎缺少樣本中的一些html，是否包含所有內容？ – Xotic750 2013-05-02 01:17:45

爲了解決您的佈局問題，您應該使用jsFiddle或Bootply（http://bootply.com/60455）來分離出HTML和CSS，並查看出了什麼問題。通過jQuery很難做CSS佈局。 – ZimSystem 2013-05-02 01:23:20

@ Xotic750我的部分也有一些CSS，而部分本身包含在ARTICLE中。如有需要，我可以稍後添加。謝謝感謝鏈接我會檢查那些:) – 2013-05-02 17:20:48

看起來你有風格JavaScript錯誤「浮動：左」 - 它需要有大約引號「左」

float:"left"

否則，它認爲你指的是一個名爲「變量剩下'。

來源

2013-05-02 01:18:34 jamauss

jamauss是正確的（http://jsfiddle.net/T9H9T/）。 @Kyohei Kaneko也從topStyles，leftColumn和rightSection的每一行中刪除最後一個逗號，因爲當最後一個聲明後面有逗號時，舊版本的IE會拋出錯誤:) – Zappa 2013-05-02 01:48:59

@Jamauss我確信我已經嘗試過了，稍後再檢查一次。只是出去開會。 – 2013-05-02 17:22:18

嘿 - 你爲什麼認爲它一旦你從第二個div中刪除「float：left」就神奇地工作？ ;）因爲它包含語法錯誤 - 不是因爲CSS不好。 – jamauss 2013-05-02 17:43:09

JQuery使用動態創建的子div時 - float：left丟失子div

回答

相關問題