css - 删除空白和更漂亮的 css

Question

我仅使用 html5 和 css(3) 从头开始​​制作了自己的静态网站。但我遇到了 2 个问题。

第一个 是顶部菜单和标题图像底部之间的空白区域。我已经尝试了所有方法。

也许唯一的解决方案是 float:left; 但随后图像会进入导航标记或边距属性的负值，但我听说这种技术很糟糕。

第二期我用图片展示http://www.filedropper.com/discoversite那是我的简单网站。我知道我的 CSS 很糟糕，但我还是个初学者。第二个问题在这里。 http://postimg.org/image/5adp6379d/ .正如您所看到的，文本是开箱即用的。 (我在 css 中使用 % 以提高响应速度)。如果有人能帮助我，我会很高兴。

Answer 1

1. 我只能猜测您的第一个问题，因为我不知道您网站的确切代码(创建 jsfiddle :D )。尝试将 vertical-align: bottom; 或 display: block; 应用于标题图片。为什么？因为图像像文本一样放置，一些字母如 g、j、q 和 p 位于底部下方等级。您的浏览器将为这些字母留出很小的空间。设置 min-width 也是一个很好的解决方案，就像 Kirk Logan 所说的那样。

2. 对于你的第二个问题，有多种解决方案(取决于你想要什么):

   • 您可以按照 Kirk Logan 的建议使用 overflow: hidden; 或 overflow: scroll 来处理您的内容。但如果您在图片中向我们展示了这种情况，这将没有任何意义。

   • 或者(有点复杂)您可以删除左右两侧的白色边框(恰好在屏幕太小的时候)，以便为文本获得更多空间。这可以通过以下方式完成:

     @media only screen and (max-width: 768px) { 
         #BigBorder1 { border-width: 0px; }
         #BigBorder2 { border-width: 0px; }
     }
     

仅当屏幕宽度小于 768 像素时，才会应用外括号内的所有内容。但老实说，这通常是相反的:当屏幕大于 768px 时，就会发生一些事情。这种简化只是为了让您更轻松。