html - 不全屏显示时如何使网页保持原样？

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;
}

最佳答案

删除行高形式<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/

关于html - 不全屏显示时如何使网页保持原样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35960713/