對齊問題的div標記

我想創建一個網頁，點擊一個按鈕，我可以添加div標籤。我想要做的是，我將在單個div內創建兩個div標籤，以便所有演示文稿均勻且類似於具有兩列和多行的表格，並且第一列僅包含標籤的列表，第二列將包含textbox 。對齊問題的div標記

這裏是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的當前想法還是應該嘗試其他方法？像桌子？

來源

2012-11-05 Nagri

我認爲問題在於'question_div.class =「question」;'行的代碼，因爲當我試圖調試我的代碼時，我沒有發現div標籤的任何樣式定義。任何人都可以請告訴我正確的語法？ – Nagri

你以什麼HTML開頭？ –

這是沒有biggie只需點擊一個按鈕調用'create_div（type）'。 – Nagri

的原因及其在不同勢線就在於你的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檢查您構建的元素是否像您設計的那樣，我建議爲開發人員或FireBug插件建立Chrome內置工具。您可以在此查看代碼：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，其generaly建議這樣做。

此外，在您更正您的JS代碼修復程序之後，還可以根據您的喜好修改一下您的CSS樣式。

來源

2012-11-05 10:58:01 scx

這樣做，謝謝。 – Nagri

這可以爲您節省大量的時間http://getfirebug.com/html – scx

還記得要改變你如何添加你的主類//dynDiv.class="main「; dynDiv.setAttribute（「class」，「main」）; – scx

如果您使用的是Chrome使用檢查元素，並找到相應的「DIV」的標籤，並嘗試調整樣式（位置）

來源

2012-11-05 10:38:12

正如你所看到的，我已經在div中定義了寬度爲40％。所以它應該默認進來一行。 – Nagri

嘗試都具有絕對的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-05 10:48:44

不行不行。 – Nagri

很簡單。要排列這兩個div，請將兩個div的位置顯示爲：inline-block;

display:inline-block;

注意：BOTH div必須擁有該屬性才能使它們排成一行。

來源

2012-11-05 11:02:24

對齊問題的div標記

回答

相關問題