html - 如何让网页在非全屏时保持原样？

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/