令人难以置信的CSS div跳跃

时间：2012-04-11 19:43:51

标签： html css

看到它或你自己！膳食类别盒子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&#39;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>
                        &nbsp;&nbsp;April 22, 2012, 5:30 a.m.
                    </p>
                    <p>&nbsp;&nbsp;(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">&nbsp;</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>
                        &nbsp;&nbsp;April 21, 2012, 7 p.m.
                    </p>
                    <p>&nbsp;&nbsp;(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">&nbsp;</div>
        
        
    </div>    
    <!-- End user's coming hosted meals div -->



    

    <div class="clearer">&nbsp;</div>
    <div class="clearer">&nbsp;</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&#39; 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">&nbsp;</div>


        </div>


        <div id="clearer">&nbsp;</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>

4 个答案:

答案 0 :(得分：1)

#header的70px底部边距怎么样？ （开发人员工具：使用它们。）

enter image description here

答案 1 :(得分：1)

从clear: both;的样式中删除.meal-box-small。

#user-column-options设置为float: left;，因此clear: both;会导致.meal-box-small移动到{{1}}以下。

答案 2 :(得分：0)

div#header的{​​{1}}为70px。减少这一点以减少标题和内容之间的空间。

答案 3 :(得分：0)

在HTML中进行此更改：

<!-- Start user's coming hosted meals div -->
    <div class="meal-category-box">
        <h4>Coming Meals that You&#39;re Cooking</h4>
            <div class="meal-box">
                <div class="meal-details">

只需将班级餐盒改为小餐厅，一切都很好。

相关问题
最新问题