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

Question

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

好吧，到目前为止我一直在使用一个表格来存储我的内容(图像):

现在，我想做的是使用 div 而不是 table。但我想将它们定位为与上图类似。 这就是我现在拥有的:

我的柠檬水摊位 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 表模拟

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>