使用动态创建的子div时的JQuery-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);

        });
    });

$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
var topStyles={
背景色：“69830E”，
颜色：“ffffff”，
尺寸：20，
fontWeight:“”，
textAlign：“居中”，
marginTop:“-20px”，
};
$（“#第(1)节”）。追加（“标题
”；
$（“#title”）.css（topStyles）；
变量leftColumn={
背景颜色：“ffffff”，
宽度：“30%”，
高度：“500px”，
颜色：“000000”，
尺码：18，
fontWeight:“”，
marginTop:“-20px”，
浮动：左，
填充左：“2px”，
};
$（“#第#节第1条”）。追加（“左栏
”；
$（“#左”）.css（左列）；
var rightSection={
背景颜色：“000000”，
宽度：“70%”，
高度：“500px”，
颜色：“ffffff”，
尺码：18，
fontWeight:“”，
textAlign：“居中”，
marginTop:“-18px”
};
$（“#章节_文章_1”）。追加（“右侧章节
”；
$（“#右”）.css（右部分）；
});
});

当我运行函数时，我的“title”div看起来很好，正如我所希望的那样，但其他两个都不存在。当我从第二个div中删除“float:left”时，它们都会出现，但会一个接一个地显示

我试图让我的标题栏显示在顶部，然后我的另外两个标题栏显示在它下面，我的第二个div“left”显示在左侧，第三个div“right”显示在“left”旁边的右侧

我尝试将我的包含部分设置为display:inline，但也不起作用

---

如何内联显示“左”div和“右”div而不消失？谢谢

看起来您的“float:left”样式出现javascript错误-它需要在“left”周围加引号

---

否则，它会认为您引用的是一个名为“left”的变量。

您的示例中似乎缺少了一些html，所有内容都包括在内了吗？为了解决布局问题，您应该使用JSFIDLE或Bootply（）来分离html和CSS，看看哪里出了问题。通过jQuery进行CSS布局是很困难的。@Xotic750我的部分也有一些CSS，部分本身包含在一篇文章中。如果有必要，我可以在以后添加这些。斯凯利：谢谢你给我的链接，我会查出来：）贾马斯是正确的（）@Kyohei Kaneko还删除了topStyles、leftColumn和rightSection中每一行的最后一个逗号，因为旧版本的IE在最后一个声明后面有逗号时会抛出错误：）@Jamauss我确信我已经尝试过了，但稍后我会再次检查。刚刚出去开会。嘿-为什么你认为当你从第二个div中删除“float:left”时它就神奇地工作了因为它包含语法错误-不是因为CSS不好。我的朋友，你是个天才；）我一定是用别的问题试过了。谢谢

float:"left"