使用 JavaScript 和 CSS 并排创建一个盒子 [重复]答案

【问题标题】：creating a box side by side using JavaScript and CSS [duplicate]使用 JavaScript 和 CSS 并排创建一个盒子 [重复]
【发布时间】：2018-08-02 09:26:45
【问题描述】：

我想并排创建两个单独的框，如下图所示。我的 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>

现在我正在寻找的输出是这样的：

需要帮助怎么做？

【问题讨论】：

创建盒子的代码在哪里？
CSS 管理对象的方面/位置，而不是 Javascript。

标签： javascript html css

【解决方案1】：

一个 div 元素默认有一个display: block。

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

你必须让你的盒子内联。比如display: inline-block;

【讨论】：

怎么修改？？没用

【解决方案2】：

您可以将 div 的 css 设置为 display:inline block 或将其更改为像 <span> 这样的内联元素

你也可以看看 float:left

另一种选择是涉及网格或 flexbox 的 css3 奇思妙想，但我怀疑这会有点矫枉过正

【讨论】：

你能告诉我吗？我是这个平台的新手

【解决方案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);
}

【讨论】：

【解决方案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;
}

【讨论】：