0

我正在尝试创建一个网页，单击按钮可以添加div标签。我想做的是，我将div在一个标签中创建两个标签，div这样所有的展示都是统一的，类似于一个有两列和多行的表格，第一列只包含标签，第二列将包含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 后，第二个部门进入另一行。我怎样才能使两者div's都在同一行？

PS：我应该坚持当前使用 div 的想法还是应该尝试其他方法？像桌子？

4

4 回答 4

1

不同行的原因在于您的 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 没有正确设置类属性。如果您使用 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 样式。

于 2012-11-05T10:58:01.373 回答
0

如果您使用 chrome 使用检查元素并找到相应的“div”标签并尝试调整样式（位置）

于 2012-11-05T10:38:12.977 回答
0

尝试将两个绝对的 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;
}
于 2012-11-05T10:48:44.600 回答
0

这很简单。要将两个 div 对齐，请将两个 div 的位置指定为 display:inline-block;

display:inline-block;

注意：两个 div 都必须具有此属性才能出现在一行中。

于 2012-11-05T11:02:24.037 回答