如何以编程方式并排创建两个div？
[英]How to put two divs created programmatically side by side?
问题描述
How do I put the two divs side by side? 
如何将两个div并排放置？ What if I have more than 2 divs and I want to put them all side by side? 如果我有超过2个div并且我想将它们并排放置怎么办？ I found that if they are canvas, they are automatically placed side by side. 我发现如果它们是帆布，它们会自动并排放置。 This is not true for divs. 对于div来说，情况并非如此。
In additional, how come 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.org/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>
6 个解决方案
解决方案1
1 2011-11-12 14:47:28
为什么不将div的样式设置为：
display: inline-block; float: left;
解决方案2
1 2011-11-12 14:49:00
Set the css rule "display: inline-block" on the DIVs you want to be side by side. 在要并排的DIV上设置css规则“display：inline-block”。
Your DIVs will need to have a width set for this to work though. 您的DIV需要设置宽度才能使用。
解决方案3
1 2011-11-12 14:51:59
may be these is how you put two divs side by side 可能这些是你如何并排两个div
<div style="float:left"> hello </div>
<div style="float:left"> world </div>
May be even these work 甚至可能是这些工作
<input type="button" value="commit">
解决方案4
1 已采纳 2011-11-12 14:54:58
DIV issue DIV问题
Use display: inline-block; 使用display: inline-block; or float: left; 或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> . 使用内部html /文本作为标题，就像您对链接<a href="...">Link text</a>所做的那样。
<button value="Commit"></button>
<br />
<button>Commit</button>
Button Sample 按钮样本
http://jsfiddle.net/t9etS/ http://jsfiddle.net/t9etS/
Fixed sample from the comments 修复了评论中的样本
http://jsfiddle.net/APqgz/2/ http://jsfiddle.net/APqgz/2/
解决方案5
0 2011-11-12 15:04:57
In addition, "Commit" isn't going to show up on your BUTTON since it's not an INPUT type button. 此外，“提交”不会出现在您的按钮上，因为它不是INPUT类型按钮。 BUTTONs don't have an attribute for value. 按钮没有值属性。
If you want your BUTTON to have the text "Commit" use this JavaScript: 如果您希望BUTTON使用“Commit”文本，请使用以下JavaScript：
yourButton.innerHTML = "Commit";
To sum up the flame war below, here is a better way to do it. 总结下面的火焰战争，这是一个更好的方法。
yourButton.appendChild( document.createTextNode( 'Commit' ));
解决方案6
0 2011-11-13 11:00:35
First of all, you can't use value for a button element. 首先，您不能将value用于按钮元素。 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. 您可能会将它与input元素混淆，其中设置value和type可以正常工作。
Second, a div always takes up entire lines. 其次， div总是占用整行。 You can see it with examples , like setting its background color. 您可以通过示例查看它，例如设置其背景颜色。 So you may want to use a span instead. 所以你可能想要使用span 。 However, there is a solution which uses a div. 但是，有一个使用div的解决方案。
Like others have said, you can set the float style property to left to prevent a div from taking up an entire line. 像其他人所说，你可以将float样式属性设置为left以防止div占用整行。 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. 我已经将'div'的textContent添加到你的div元素中，以明确它们是div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.