0

嗨，我已经尝试了多种不同的方法来尝试解决这个问题，但我希望得到您的帮助。

我有一个 css 格式但为空的 SECTION ，我试图在单击按钮时使用 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 看起来很好，但其他两个不存在。当我从我的第二个 div 中删除“float:left”时，它们都出现了，但显示在另一个之上。

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

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

如何在不消失的情况下显示我的“左” div 和“右” div？谢谢

4

1 回答 1

1

看起来你有一个样式为“float：left”的javascript错误 - 它需要在“left”周围加上引号

float:"left"

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

于 2013-05-02T01:18:34.077 回答