0
각 글자가 고유 한 상자에 있어야하는 기능을 개발 중입니다. 스타일을 지정하려고합니다. 상자는 다른 상자 옆에 있거나 여러 행에 있어야하며 두 경우 모두 여백을 두어야합니다. 화면 크기를 작게 (또는 모바일에서 테스트 할 때까지) 제대로 작동하고 하단 행의 문자가 위 행의 문자와 겹칩니다. margin을 변경하면 작은 화면의 각 상자에 전체 여백이 적용되지 않습니다. 나는 overflow:auto을 추가하려고했지만 차이점을 보지 못했습니다. 각 글자 상자가 겹치지 않고 원하는 여백으로 구분되도록하려면 어떻게해야합니까? (화면 크기를 조정할 때 요소를 두 줄로 배치해야하는 경우에도)?div가 작은 화면 크기로 겹칩니다.
나는 비슷한 것을 묻고있다. 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;
}
