html - CSS 定位/ float

Question

我有一款贪吃蛇游戏，但我似乎无法让 CSS 正确显示。我想要的风格是在右侧有一个与我的游戏直接相邻的侧边栏(有点像向左浮动？)但我已经用尽了我的报告。我尝试使用内联 block 和多个 float 但没有成功。我拥有的图像基本上是绝对定位的(使用 transform translate: xx)，因为当我将图像标签放在我的细节 div 中时，它似乎只渲染其中一个图像。我最后添加了一堆换行符，然后将图像直接移动到空白点之间。你可以在我的 github 页面下面看到我想要的东西(除了我宁愿它响应屏幕尺寸而不是在屏幕变小时中断)。

http://jeffreycheng92.github.io/SnakeGame/html/

// these are both images and my current (unwanted) css

.arrows {
  display: inline-block;
  float: left;
  transform: translate(-93%, -150%);
}

.p { 
  display: inline-block;
  left: 25px;
  float: left;
  transform: translate(75%);
}

尽管我的 html 定位在 jsfiddle 上似乎完全被破坏了，但您可以在下面看到我的代码。

https://jsfiddle.net/g9c6wfs7/

Answer 1

我不确定你的 html 结构，但你需要什么；一些我是如何做到的。检查This Fiddle .

我希望这能给你一些想法。

也想给点建议；

• 使用<span>用于小文本内容，以便您可以轻松地操纵结构。
• 而不是使用 <br />为了腾出空间，使用 ma​​rgin