Ich arbeite an einer Funktion, bei der jeder Buchstabe in einer eigenen Box sein sollte, die ich versuche zu stylen. Boxen sollten nebeneinander oder in mehreren Reihen mit einem Abstand zwischen ihnen in jedem Fall sein. Es funktioniert gut, bis ich die Bildschirmgröße zu einem kleinen ändere (oder es auf Mobile teste), und dann die Buchstaben von der untersten Reihe die der oben genannten Reihe überlappen. Wenn Sie margin ändern, wird auf dem kleineren Bildschirm nicht auf jede Box ein Rundumrand angewendet. Ich habe versucht, overflow:auto hinzuzufügen, sah aber keinen Unterschied. Wie kann ich jeden Briefkasten mit dem gewünschten Rand trennen, ohne sich zu überlappen (selbst wenn die Elemente bei der Bildschirmgrößenänderung in zwei Reihen angeordnet werden müssen)?divs überlappen sich in kleinerer Bildschirmgröße
Ich sehe, dass etwas ähnliches before gefragt wurde, aber ich bin mir nicht sicher, wie man die Antwort überträgt.
Nach Ansicht:
<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>
Die zugehörige 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;
}
