html - 像表格单元格和行一样定位 div

Question

我正在尝试制作一个小游戏来学习一些 javascript。

好的，所以直到现在我一直在为我的内容(图片)使用表格:

现在，我要做的是使用 div 而不是表格。但我想让它们看起来与上图相似。这就是我现在拥有的:

我的 Lemonade stand div 代码(其他的类似):

<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>

我是初学者，正在努力学习。谢谢!

Answer 1

如果添加下一个样式，div 将像表格一样:

display:table; 到 div table-analog

display:table-row; 到 div tr-analog

display:table-cell; 到 div td-analog;

<div style="display: table;">

<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>