[英]alignment issue of div tag
我正在尝试创建一个网页,单击一个按钮即可添加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's
在同一行?
PS:我应该坚持使用div的当前想法还是应该尝试其他方法? 喜欢桌子吗?
其不同之处在于您的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或表,您正确使用div是正确的,通常建议这样做。
同样,在更正了JS代码修复之后,您还可以根据自己的喜好使用CSS样式。
如果您正在使用带检查元素的chrome,并找到相应的“ div”标签,然后尝试调整样式(位置)
尝试将两个Divs的绝对位置都放在相对的主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;
}
这很简单。 要排列两个div,请将两个div的位置指定为display:inline-block;
display:inline-block;
注意:两个div都必须具有此属性,才能显示在一行中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.