【发布时间】：2015-06-24 21:20:01
【问题描述】：
看看还是你自己！ food-category-box div 从标题到其余内容有莫名的跳转。搞不定？
My code 也显示在此处：
/* Begin Base */
body {
color: #245a03;
background-color: #e7f5df;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light",
"HelveticaNeue", Helvetica, Arial;
font-size: 17px;
margin: 0;
padding: 0;
height: 100%;
}<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MealMarket</title>
<meta name="description" content="">
<meta name="author" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<script src="/static/bootstrap/js/bootstrap-alert.js"></script>
<script src="/static/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="container">
<div id="header">
<a href="/"><h1>Meal Market</h1>
<span>Share food, get food, more merry mealtimes</span></a>
</div>
<div id="main" role="main" class="container">
<div id="user-info">
<img src="/static/images/pics/profile-default.jpg">
<div id="user-column-options">
<h3 style="word-wrap:break-word;">
Matt</h3>
<p>Credits: 10</p>
<ul>
<li><a href="/meals/new/">Make meal</a></li>
<li><a href="/meals">Find meal</a></li>
<!--<li><a href="">Past meals</a></li>-->
</ul>
</div>
</div>
<!-- End user info column -->
<div id="stream">
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4><br />
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/22/Apr/2012/05:30">
Fungus food</a></h5>
April 22, 2012, 5:30 a.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box"><a href="/meals/matt/22/Apr/2012/05:30?mealsignup=true" class="btn">Click to attend this meal</a></div>
</p>
</div>
</div>
<div class="clearer"> </div>
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/21/Apr/2012/19:00">
Lentil stew</a></h5>
April 21, 2012, 7 p.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box"><a href="/meals/matt/21/Apr/2012/19:00?mealsignup=true" class="btn">Click to attend this meal</a></div>
</p>
</div>
</div>
<div class="clearer"> </div>
</div>
<!-- End user's coming hosted meals div -->
<div class="clearer"> </div>
<div class="clearer"> </div>
<!-- Start other coming meals div -->
<div class="meal-category-box">
<h4>Other Upcoming Meal Invites</h4>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/13/Apr/2012/00:30">
Great flippin' food</a></h5>
</p>
<p>April 13, 2012, 12:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box"><a href="/meals/jervin/13/Apr/2012/00:30?mealsignup=true" class="btn">Click to attend this meal</a></div>
</div>
</div>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/29/Apr/2012/04:30">
Veggie curry</a></h5>
</p>
<p>April 29, 2012, 4:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box"><a href="/meals/jervin/29/Apr/2012/04:30?mealsignup=true" class="btn">Click to attend this meal</a></div>
</div>
</div>
</div>
<!-- End other coming meals div -->
</div>
<div class="clearer"> </div>
</div>
<div id="clearer"> </div>
<footer class="footer">
<hr>
<ul id="footer-links">
<li><a href="/about">About / FAQ</a></li>
<li><a href="/legal">Privacy / Legal</a></li>
<li><a href="/media">Media</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</footer>
</div>
</div> <!-- end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!--<script defer src="/static/js/plugins.js"></script>
<script defer src="/static/js/script.js"></script>-->
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".collapse").collapse({toggle: false});
});
</script>
<script type="text/javascript">
// On click...
$("#cross-icon").click(function() {
$('#new-user-box p').slideUp("slow")
$('#new-user-box').slideUp("slow");
});
</script>
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>【问题讨论】：
-
请在您的问题中包含您的代码。另外，我看不到跳跃。请更好地解释您所指的内容。
-
不要只是将所有代码都转储到 jsfiddle 中，这不是它的工作原理。 jsfiddle 已经为您提供了 doctype、head 和 body。它还具有单独的 css 和 javascript 区域。此外，如果脚本不在下拉列表中，您可以将脚本添加到资源中，例如额外的 css 或 jquery 插件。如果您需要解决方案，请在您的问题上多做一些工作。