0

こんにちは、この問題を解決するためにさまざまな方法を試しましたが、助けてください。

ボタンがクリックされたときにJQueryを使用してレイアウトを動的に作成しようとしているcss形式の空のセクションがあります。

これは私の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 は問題なく表示されますが、他の 2 つが表示されません。2 番目の div から「float: left」を削除すると、両方とも表示されますが、重ねて表示されます。

タイトルバーを上部に表示し、他の2つをその下に配置して、2番目のdiv「左」を左側に表示し、3番目のdiv「右」を右側の隣に表示しようとしています」左"

含むセクションを display:inline に設定しようとしましたが、どちらも機能しませんでした。

「左」の div と「右」の div を消えずにインラインで表示するにはどうすればよいですか? ありがとう

4

1 に答える 1

1

スタイル「float:left」で JavaScript エラーが発生したようです。「left」を引用符で囲む必要があります。

float:"left"

それ以外の場合は、'left' という名前の変数を参照していると見なされます。

于 2013-05-02T01:18:34.077 に答える