有问题的元素是“他们让事情易于理解吗?他们有趣吗?”在右上方的浅灰色框中。当页面加载时,它从高处开始,然后向下移动30px。单击导航栏中的“信息”时会发生同样的事情。
这是元素:<div id="question_sub" class="well"></div>
。
为什么会发生这种情况,我该如何解决?
答案 0 :(得分:3)
回答为什么会发生
如果您尝试在没有javascript的情况下加载页面,则页面会显示为
<强>问题强> 您的页面非常依赖于js来修改dom元素和样式。 解决方案为了避免这种风格使css中的页面尽可能地最大化,JS应该用于交互或使网页具有吸引力。
可能的问题 如果你要加载许多与页面内容无关的外部脚本,比如在head元素内的铁饼 的解决方案强> 如果您不这样做,则将所有外部js从头部移动到另一端,或者您可以异步加载它们。请参阅Mozilla Synch and Async
另一种方式 如果你想只在内容的某些部分发生变化时才从服务器加载内容,那么使用应用程序缓存技术将从客户端机器加载页面,因此只有初始页面加载需要时间用于第一次加载,然后它将是相当的快速 查看Using Application Cache
其他方式
还有很多东西,搜索它你会发现知识的海洋,reference
答案 1 :(得分:1)
如果你想在元素之间保持50px的边距,那么将navbar
类更改为50px
.navbar {
margin-bottom: 50px;
}
目前设定为20px;
答案 2 :(得分:0)
删除此代码: -
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
答案 3 :(得分:0)
这是关于融合边际的问题
删除它:
#college_pages_css .questions {
margin-top: 30px;
试试这个,它会正常工作:
#college_pages_css .questions {
margin-top: 0;
如果您想要保证金,请将保证金设为div#normal;)
答案 4 :(得分:0)
由于浮动元素,您似乎遇到了CSS问题。
尝试浮动左侧的导航栏:
#normal > nav {
float: left;
}
.disqus { float: right }
并将以下元素包装在一个浮动到右侧的div中,例如:
<div class="disqus">
<div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
<p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
<div id="disqus_thread">
</div>