Question

如何将两个div并排放置？如果我有超过2个div并且我想将它们并排放置怎么办？我发现如果它们是帆布，它们会自动并排放置。对于div来说，情况并非如此。

另外，为什么按钮的值不会改变按钮上的文字？我期待“提交”出现，但事实并非如此。

<!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>

Answer 1

为什么不将div的样式设置为：

display: inline-block; float: left;

Answer 2

在想要并排的DIV上设置css规则“display：inline-block”。

你的DIV需要设置一个宽度才能正常工作。

Answer 3

可能是这些是你如何将两个div并排放置

 <div style="float:left"> hello </div>
 <div style="float:left"> world </div>

甚至可能是这些工作

<input type="button" value="commit">

Answer 4

DIV问题

在样式中使用display: inline-block;或float: left;。

 Div.elemOne.style.display = 'inline-block';
 Div.elemTwo.style.display = 'inline-block';

按钮问题

该值不是每个浏览器中按钮的标题。使用内部html / text作为标题，就像对链接<a href="...">Link text</a>一样。

<button value="Commit"></button>
<br />
<button>Commit</button>

按钮示例
http://jsfiddle.net/t9etS/

修复了评论中的样本
http://jsfiddle.net/APqgz/2/

Answer 5

此外，“提交”不会出现在您的按钮上，因为它不是 INPUT 类型按钮。按钮没有值的属性。

如果您希望BUTTON使用“提交”文本，请使用此JavaScript：

yourButton.innerHTML = "Commit";

总结下面的火焰战争，这是一个更好的方法。

yourButton.appendChild( document.createTextNode( 'Commit' ));

Answer 6

首先，您不能将value用于按钮元素。它们是容器，所以你最好使用它：

Div.buttonCommit.textContent="Commit";

此外，您不需要设置类型，因为它是一个按钮元素。您可能会将其与input元素混淆，其中设置value和type可以正常工作。

其次，div总是占用整行。您可以使用examples查看它，就像设置其背景颜色一样。因此，您可能希望使用span代替。但是，有一个使用div的解决方案。

就像其他人所说的那样，你可以将float样式属性设置为左边以防止div占用整行。 Example。这是有效的，但是你可以看到它与页面上可能出现的其他文本相混淆。

对于您的代码，以下作品：

div.style.float = 'left';

Working example with your code fixed。我已将'div'的textContent添加到您的div元素中，以明确它们是div。

如何以编程方式并排创建两个div？

6 个答案:

DIV问题

按钮问题