div 在较小的屏幕尺寸中重叠答案

【问题标题】：divs overlap in smaller screen sizediv 在较小的屏幕尺寸中重叠
【发布时间】：2016-08-09 10:17:36
【问题描述】：

我正在开发一个功能，每个字母都应该放在自己的盒子里，我正在尝试设置它的样式。框应该是一个相邻的或在多行中，在任何一种情况下它们之间都有一个边距。它工作正常，直到我将屏幕尺寸更改为小（或在移动设备上测试），然后底行的字母与上一行的字母重叠。更改margin 不会对较小屏幕中的每个框应用全方位边距。我尝试添加overflow:auto，但没有发现区别。如何让每个字母框以所需的边距分隔而不重叠（即使在屏幕调整大小时元素需要间隔成两行）？

我看到有人问过类似的问题before，但我不确定如何转移答案。

在视图中：

<div class="booyah-box col-xs-10 col-xs-offset-1">
  <h2 class="text-center">
    <% scrambled_word_array.each do |character| %>
      <div class="boxed-letter"><%= character %></div>
    <% end %>
  </h2>
</div>

相关的CSS：

.booyah-box {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  background: #fff;
  border: 1px solid #ccc;
  border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
  padding: 10px;
  font-family: "Lucida Grande", sans-serif;
}

.booyah-box .boxed-letter {
  display: inline;
  padding: 8px;
  margin: 2px;
  border: 1px solid black;
  border-radius: 5px;
  background: grey;
  font-family: "Courier New", Courier, monospace;
  color: white;
}

【问题讨论】：

标签： html css ruby-on-rails margin

【解决方案1】：

这对你有帮助

用display: inline-block代替display: inline

对我来说很好。

【讨论】：

【解决方案2】：

在.boxed-letter 上尝试display: inline-block;，这应该给它们自己的空间并防止它们重叠

【讨论】：