Question

所以我得到了＃34;盒子＆＃34;哪个显示图片。图片来自Javascript foreach循环，它用html输入。问题是盒子堆叠在一起，我怎么能防止这种情况。就像他们拥有＆＃34; space＆＃34;每个盒子之间？

使用Javascript：

$("#inventory").html($("#inventory").html() + "<li class='col s2' style='padding:0%;'><div class='card item-card waves-effect waves-light hoverable' style='margin:0;' id='" + item.id + "'><div class='card-content center-align' style='padding:6%'>" + item.name + "<img title=\"" + item.name + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/'style='width:15vw;height:auto;'>" + numberWithCommas(item.price) + " Coins</div></div></li>");

Answer 1

<li>用于创建列表，就像在MS Word中使用项目符号一样。请尝试使用，然后将style='padding:0;'更改为style='padding: 15px（或者您需要更多px或％）。其次，你真的可以使用浮动。

<div class='col s2' style='padding:5%;float:left;'>
   <div class='card item-card waves-effect waves-light hoverable' style='margin:0;' id='itemID'>
      <div class='card-content center-align' style='padding:6%'>
         Item Name
         <img title="Item Name" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/iconURL/' style='width:15vw;height:auto;'>
         price Coins
      </div>
   </div>
</div>

在尝试使用javascript动态执行之前，首先应该正确获取html和CSS。特别是因为我们不知道为你的课程设置了什么css（col，s2，card，item-card等）

HTML / Javascript / CSS盒子相互堆叠？

1 个答案: