Question

您好我已尝试过多种不同的方法来尝试解决此问题，但我希望您能提供帮助。

我有一个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“左”显示在左边，第三个div“右”显示在右边在“左”旁边

我尝试将我的包含部分设置为显示：内联但它也不起作用。

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

Answer 1

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

float:"left"

否则，它认为你指的是一个名为'left'的变量。

JQuery在使用动态创建的子div时 - float：left丢失了子div

1 个答案: