如何在不全屏时让网页保持原样？

Question

http://codepen.io/davegumba/pen/yOJmNB

当网页不是全屏时，该网页就会崩溃。我如何解决这个问题，使其保持原样？谢谢。它主要是标题和三个不合适的方框。

h1 {
  color:    #F5FFFA;
  margin: 50px auto;
  letter-spacing: 12px;
  line-height: 30px;
  font-size: 65px;
  font-family: 'Lora', serif;
}

.both {
  float: right;
}

.strike {
  float: left;
}

.grapple {
  width: 30%;
  margin-left: 50px;
}

Answer 1

删除行高<h1>应该修复标题。如果您想在上方和下方留出空间，请使用margin-top和margin-bottom。

对于这些框，只有在浏览器窗口足够宽的情况下，您才可以使用CSS媒体查询来应用float和margin。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

您也可以尝试使用flex来布局框。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/