Jquery 如何将三个div标记一个接一个地放置？

考虑以下代码。

<div class="button_con" style="width: 400px; height: 500px; text-align: center;"> 
<div id="canvas1" title="Buffer Indicator">Buffer Count :   ${buffer1}</div>
<div id="canvas2" title="CPU Indicator">Cpu Usage :     ${cpu1}%</div>
<div id="canvas3" title="Memory Indicator">Memory Usage:    ${memory1}%</div>

</div> 

#canvas1 {
display: inline;   
font:italic bold 14px/34px Georgia, serif;
text-align: center;
line-height: 8;
text-transform:uppercase;
height: auto;
width: auto;

}

#canvas2 {
display: inline;   
font:italic bold 14px/34px Georgia, serif;
text-align: center;
line-height: 8;
text-transform:uppercase;
height: auto;
width: auto;

}

#canvas3 {
display: inline;   

font:italic bold 14px/34px Georgia, serif;
text-align: center;
line-height: 8;
text-transform:uppercase;
height: auto;
width: auto;

}

这里的div标记相邻显示，div标记包含jsdraw2dxapi元素，但我认为这不会影响div标记的位置。如何将其显示在另一个下方？

替换：

display: inline;

作者：

---

div彼此相邻的原因是您将其显示属性设置为“inline”

默认情况下，div的显示属性为“block”，这是您想要的行为。您可以将代码更改为：

display: block;

或者简单地说，完全删除声明，默认行为就会生效

---

另一方面，您的情况更适合使用类而不是ID，因为所有三个div的样式都是相同的。看看这里的工作原理：

I inserted

display:block但我需要将行显示在div标记的左侧，而不是底部。这可能吗？我想我不明白你想要什么。。。你想要一条

边界线？@lifeatstack你在告诉abt这是哪一行你建议的代码产生了这个结果，但我想要这个Ok。你希望他们怎么样？（如有图像，将不胜感激）

display: block;