admin管理员组文章数量:1391969
How do I put the two divs side by side? What if I have more than 2 divs and I want to put them all side by side? I found that if they are canvas, they are automatically placed side by side. This is not true for divs.
In additional, how e the button's value doesn't change the text on the button? I was expecting "Commit" to show up but it didn't.
<!DOCTYPE html>
<html xmlns="">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
function draw () {
var displayHeight = 200;
var displayWidth = 100;
var container = document.getElementById("container");
var Div = {
elemOne : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
elemTwo : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
buttonCommit: CreateButtonElement (displayWidth,displayHeight/10*2)
};
Div.buttonCommit.type="button";
Div.buttonCommit.value="Commit";
Div.elemOne.style.border = '1px solid black';
Div.elemTwo.style.border = '1px solid black';
container.appendChild (Div.buttonCommit);
container.appendChild (document.createElement("br"));
container.appendChild (Div.elemOne);
container.appendChild (Div.elemTwo);
}
function CreateRectCanvasElement(width, height)
{
var canvas = document.createElement('canvas');
canvas.style.position = 'relative';
canvas.style.border = '1px solid black';
canvas.style.width = width + 'px';
canvas.style.height= height + 'px';
return canvas;
}
function CreateButtonElement(width, height)
{
var element = document.createElement('button');
element.style.width = width + 'px';
element.style.height = height + 'px';
return element;
}
function CreateDivElement()
{
var div = document.createElement('div');
div.style.position = 'absolute';
return div;
}
function CreateRectDivElement (width, height)
{
var div = document.createElement('div');
div.style.width = width + 'px';
div.style.height= height + 'px';
return div;
}
</script>
</head>
<body onload="draw()">
<div id="container"></div>
</body>
</html>
How do I put the two divs side by side? What if I have more than 2 divs and I want to put them all side by side? I found that if they are canvas, they are automatically placed side by side. This is not true for divs.
In additional, how e the button's value doesn't change the text on the button? I was expecting "Commit" to show up but it didn't.
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
function draw () {
var displayHeight = 200;
var displayWidth = 100;
var container = document.getElementById("container");
var Div = {
elemOne : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
elemTwo : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
buttonCommit: CreateButtonElement (displayWidth,displayHeight/10*2)
};
Div.buttonCommit.type="button";
Div.buttonCommit.value="Commit";
Div.elemOne.style.border = '1px solid black';
Div.elemTwo.style.border = '1px solid black';
container.appendChild (Div.buttonCommit);
container.appendChild (document.createElement("br"));
container.appendChild (Div.elemOne);
container.appendChild (Div.elemTwo);
}
function CreateRectCanvasElement(width, height)
{
var canvas = document.createElement('canvas');
canvas.style.position = 'relative';
canvas.style.border = '1px solid black';
canvas.style.width = width + 'px';
canvas.style.height= height + 'px';
return canvas;
}
function CreateButtonElement(width, height)
{
var element = document.createElement('button');
element.style.width = width + 'px';
element.style.height = height + 'px';
return element;
}
function CreateDivElement()
{
var div = document.createElement('div');
div.style.position = 'absolute';
return div;
}
function CreateRectDivElement (width, height)
{
var div = document.createElement('div');
div.style.width = width + 'px';
div.style.height= height + 'px';
return div;
}
</script>
</head>
<body onload="draw()">
<div id="container"></div>
</body>
</html>
- +1 for having code that's not ugly as hell – Raynos Commented Nov 13, 2011 at 10:37
6 Answers
Reset to default 1DIV issue
Use display: inline-block; or float: left; in the style.
Div.elemOne.style.display = 'inline-block';
Div.elemTwo.style.display = 'inline-block';
Button issue
The value is not in every browser the caption of the button. Use the inner html/text for the caption, just like you do for links <a href="...">Link text</a>.
<button value="Commit"></button>
<br />
<button>Commit</button>
Button Sample
http://jsfiddle/t9etS/
Fixed sample from the ments
http://jsfiddle/APqgz/2/
Why not set the style of your divs to be:
display: inline-block; float: left;
Set the css rule "display: inline-block" on the DIVs you want to be side by side.
Your DIVs will need to have a width set for this to work though.
may be these is how you put two divs side by side
<div style="float:left"> hello </div>
<div style="float:left"> world </div>
May be even these work
<input type="button" value="mit">
First of all, you can't use value for a button element. They are containers, so you'd be better of using this:
Div.buttonCommit.textContent="Commit";
Also, you don't need to set the type, because it is a button element. You were probably confusing it with the input element, where setting the value and the type would work fine.
Second, a div always takes up entire lines. You can see it with examples, like setting its background color. So you may want to use a span instead. However, there is a solution which uses a div.
Like others have said, you can set the float style property to left to prevent a div from taking up an entire line. Example. That works, but as you can see it messes with the other text that may be present on the page.
For your code, the following works:
div.style.float = 'left';
Working example with your code fixed. I've added the textContent of 'div' to your div elements to make it clear that they're divs.
In addition, "Commit" isn't going to show up on your BUTTON since it's not an INPUT type button. BUTTONs don't have an attribute for value.
If you want your BUTTON to have the text "Commit" use this JavaScript:
yourButton.innerHTML = "Commit";
To sum up the flame war below, here is a better way to do it.
yourButton.appendChild( document.createTextNode( 'Commit' ));
本文标签： javascriptHow to put two divs created programmatically side by sideStack Overflow
版权声明：本文标题：javascript - How to put two divs created programmatically side by side? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744718340a2621544.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论