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

回答

相关问题