javascript - divタグの配置問題

Question

divボタンをクリックしてタグを追加できる Web ページを作成しようとしています。私が考えたのはdiv、単一のタグ内に2 つのタグを作成divして、全体的なプレゼンテーションが均一になり、2 つの列と複数の行を持ち、最初の列にはラベルのみが含まれ、2 番目の列にはtextbox.

JS ファイルは次のとおりです。

        var counter = 0;

function create_div(type){
        var dynDiv = document.createElement("div");

             dynDiv.id = "divid_"+counter;
             dynDiv.class="main";
             document.body.appendChild(dynDiv);
             question();
             if(type == 'ADDTEXTBOX'){
                ADDTEXTBOX();
             }

             counter=counter+1;
        }

    function question(){
        var question_div = document.createElement("div");
            question_div.class="question";
            question_div.id = "question_div_"+counter;
            var Question = prompt("Enter The Question here:", "");

            var node=document.createTextNode(Question);
            question_div.appendChild(node);
            var element=document.getElementById("divid_"+counter);   
            element.appendChild(question_div);
        }

    function ADDTEXTBOX(){
            var answer_div = document.createElement("div");
            answer_div.class="answer";
            answer_div.id = "answer_div_"+counter;
            var answer_tag = document.createElement("input");
                    answer_tag.id = "answer_tag_"+counter;
                    answer_tag.setAttribute("type", "text");
                    answer_tag.setAttribute("name", "textbox");
                        answer_div.appendChild(answer_tag);

            var element=document.getElementById("divid_"+counter);
            element.appendChild(answer_div);
        }

css ファイルは次のとおりです。

.question
{
    width: 40%;
    height: auto;
    float: left;
    display: inline-block; 
    text-align: justify;
    word-wrap:break-word;
}
.answer
{
    padding-left:10%;
    width: 40%;
    height: auto;
    float: left;
    overflow: auto;
    word-wrap:break-word;
}
.main
{   
    width: auto;
    background-color:gray;
    height: auto;
    overflow: auto;
    word-wrap:break-word;
}

私の問題は、コードが適切に機能していることですが、両方の部門が一直線に並んでいないことです。最初の div が画面に表示された後、2 番目の div が別の行に表示されます。どうすれば両方をdiv's同じ行に入れることができますか?

PS: div を使用するという現在の考えに固執する必要がありますか、それとも他のアプローチを試す必要がありますか? テーブルのような？

score 1 · Accepted Answer

異なる行にある理由は、JS コードにあります。次のようにクラスを設定してみてください。

           //question_div.class="question";
        question_div.setAttribute("class", "question") ;

と

            //answer_div.class="answer";
        answer_div.setAttribute("class", "answer");

そしてこれも：

//dynDiv.class="main";
dynDiv.setAttribute("class", "main");

div に class 属性が正しく設定されていません。Firefox を使用して、作成した要素が設計どおりであるかどうかを確認する場合は、開発者向けの chrome 組み込みツールまたは FireBug アドオンをお勧めします。ここでコードを確認できます: http://jsfiddle.net/Nnwbs/2/

      var counter = 0;

function create_div(type){
    var dynDiv = document.createElement("div");

         dynDiv.id = "divid_"+counter;
         //dynDiv.class="main";
         dynDiv.setAttribute("class", "main"); 
         document.body.appendChild(dynDiv);
         question();
         if(type == 'ADDTEXTBOX'){
            ADDTEXTBOX();
         }

         counter=counter+1;
    }

function question(){
    var question_div = document.createElement("div");
       //question_div.class="question";
        question_div.setAttribute("class", "question") ;  
        question_div.id = "question_div_"+counter;
        var Question = prompt("Enter The Question here:", "");

        var node=document.createTextNode(Question);
        question_div.appendChild(node);
        var element=document.getElementById("divid_"+counter);   
        element.appendChild(question_div);

    }

function ADDTEXTBOX(){
        var answer_div = document.createElement("div");
        //answer_div.class="answer";
        answer_div.setAttribute("class", "answer");            
        answer_div.id = "answer_div_"+counter;
        var answer_tag = document.createElement("input");
                answer_tag.id = "answer_tag_"+counter;
                answer_tag.setAttribute("type", "text");
                answer_tag.setAttribute("name", "textbox");
                    answer_div.appendChild(answer_tag);

        var element=document.getElementById("divid_"+counter);
        element.appendChild(answer_div);

}
create_div("ADDTEXTBOX");

そして、そのアプローチについては、div またはテーブルを意味します。div を使用するのは正しいです。一般的には、そうすることをお勧めします。

また、JS コードを修正した後、必要に応じて CSS スタイルも少し修正します。

score 0 · Accepted Answer

相対的である可能性のあるメインdiv内に絶対値で両方のDivを配置してみてください。何かのようなもの

#mainDiv {
    position:absolute; /* or relative depends how you have it*/
    width:80%;
    height:100%;
    left:10%;
}
#div1 {
    position:absolute;
    width: 40%;
    height:100%;
    left:0px;
    top:0px;
}

#div2 {
    position:absolute;
    width: 40%;
    height:100%;
    right:0px;
    top:0px;
}

score 0 · Accepted Answer

それは簡単です。両方の div を並べるには、2 つの div の位置を display:inline-block; として指定します。

display:inline-block;

注: 両方の div が 1 行に表示されるようにするには、このプロパティが必要です。

score 0 · Accepted Answer

インスペクト要素を使用してクロムを使用し、対応する「div」タグを見つけてスタイル（位置）を調整しようとする場合

javascript - divタグの配置問題

4 に答える 4

Related

Reference