使用JavaScript和CSS并排创建一个盒子

Question

我想并排创建两个单独的框，如下图所示。我的JavaScript代码写在下面。问题是当我尝试创建第二个框时，它会掉下来，而我想要第一个框旁边的框。

//define your javascript libraries
resource = [
  "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
  "//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]

//add scripts to head
$.getScript(resource[0], function() {
  $.getScript(resource[1], init)
})

//start your widget
init = function() {
  var g = new JustGage({
    id: "gauge",
    value: parseInt($("#6becbadfe55c4b04a589afae48ea4843").text()),
    min: -1000,
    max: 1000,
    title: "Net Income margin %"
  });

  //refresh gauge when calcvalue changes
  $(calcValue).on('DOMSubtreeModified', function() {
    g.refresh($(this).text())
  })
}

<DIV id=gauge style="HEIGHT: 325px; WIDTH: 570px"></DIV>
<SPAN id=calcValue><SpotfireControl id="6becbadfe55c4b04a589afae48ea4843" /></SPAN>

现在我正在寻找的输出看起来像：

需要帮助吗？

Answer 1

div元素默认情况下具有display: block。

默认情况下，块不在同一行。

您必须使框内嵌。例如display: inline-block;

Answer 2

您可以将div的CSS设置为display:inline block，也可以将其更改为内联元素，例如<span>

您还可以查看float：left

另一种选择是涉及网格或flexbox的css3幻想，但我怀疑这会过分杀伤

Answer 3

CSS用于管理样式/位置，而不是Javascript。

html

<div id="gauge"></div>
<span id="calcValue"><!-- ... --></span>

css

#gauge, #calcValue {
    display: inline-block;
}

#gauge {
    width: 570px;
    height: 325px;
}

#calcValue {
    width: calc(100% - 570px);
}

Answer 4

<div class="somthing">dsfdsf</div>
<div class="somthing">dsfdsf</div>
<div class="somthing">sdfdsfsdf</div>

CSS

.somthing{
  height: 100px;
  width: 200px;
  border: 1px solid black;
  display: inline-block;
}