如何在另一个下方放置三个div标签？

Question

请考虑以下代码..

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

这是我的CSS。

#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标签包含jsDraw2dx api元素，但我认为这不会影响div标签的位置。如何管理它以显示另一个？

Answer 1

div出现在彼此旁边的原因是因为您将其显示属性设置为“内联”。

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

display: block;

或者简单地说，完全删除声明，默认行为将启动。

另一方面，您的情况更适合使用类而不是ID，因为所有三个div的样式都相同。看看这在这里如何运作：http://codepen.io/anon/pen/gEyDo

Answer 2

更换：

display: inline;

由：

display: block;