Div 拒绝垂直堆叠彼此靠近

Question

我的 CSS 和 HTML 有问题，我认为找不到解决方法。我试图在页面顶部设置一组 6 个 div，其中包含一个仅包含文本的 div，其下方有一组 3 个 div 宽，每个都包含文本和图像。当前发生的情况是顶部的 6 个块正确显示在顶部，然后有一个大的空白区域，下面有 3 个 div 集。应该在它们之间的文本根本不显示。我的 HTML 代码是：

<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="menu-type>Kale & Grain Bowls</div>
<div class="foodcontent">
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/spicy-avocado-lime"><div class="spicy-avocado-lime">SPICY AVOCADO & LIME</div></a>
<div class="textblock">kale, sautéed veggies, avocado, black beans, corn, grape tomato, queso fresco, lime, cilantro, chipotle puree, red pepper vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/toasted-almond-ginger"><div class ="toasted-almond-ginger">TOASTED ALMOND & GINGER</div </a>
<div class="textblock">kale, sautéed veggies, bok choy, tamari almonds, red cabbage, enoki mushrooms, mint, toasted almond-ginger sauce</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/local-apple-bacon"><div class="local-apple-bacon-bowl">LOCAL APPLE & BACON BOWL</div></a>
<div class="textblock">kale, avocado, NH slab bacon, local apples, cherries, dried cranberries, sunflower seeds, scallions, red wine vinegar, olive oil</div </div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/power-bowl"><div class="power-bowl">POWER BOWL</div></a>
<div class="textblock">kale, sesame carrots, Brussels sprouts, crunchy chickpeas, pepitas, local egg, tomato vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/farmstand-  tomato-basil"><div class="farmstand-tomato-basil">FARMSTAND TOMATO-BASIL</div></a>
<div class="textblock">kale, yellow & green beans, corn, heirloom tomatoes,     grilled halloumi cheese, lima beans, Kalamata olives, sunflower seeds, basil    vinaigrette</div>
</div></div></div>

我的 CSS 是：

    .foodblock{
    float: left;
    margin: 10px;
    height: 400px;
    bottom: 50px;
}
.textblock{
    float: left;
    margin: 20px;
    text-align: center;
}
.menu-type{
    text-align: center;
    font-weight: bold;
    font-family: "Times New Roman", Georgia, Serif;
    font-size: 2.5em;
}
.spicy-avocado-lime{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.toasted-almond-ginger{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.local-apple-bacon-bowl{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.power-bowl{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.farmstand-tomato-basil{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.foodcontent{
    bottom: 500px;
}

如果您知道可能导致此问题的原因，请提供帮助。

Answer 1

您的 HTML 中有一堆错误和缺少括号。我已经把它清理干净并扔在小提琴中：

https://jsfiddle.net/7gohamt3/

例如，您在这一行缺少右引号：

<div class="menu-type>Kale & Grain Bowls</div>

这应该可以解决您的问题。

Answer 2

如果您正在谈论在成分列表下方创建几何图形的 foodblick，请尝试设置 height:auto 以便 div 符合内容的大小而不是离散的 px 值。

.foodblock{
    height:auto;
    /* rest of declarations */
{

https://jsfiddle.net/x1x6gjw4/

Answer 3

我猜你的问题是关于“羽衣甘蓝和谷物碗”没有显示。如果是这样，请关闭属性class的引号

<div class="menu-type">Kale & Grain Bowls</div>

在其他 2 个地方关闭 div 标签存在问题

<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/toasted-almond-ginger"><div class ="toasted-almond-ginger">TOASTED ALMOND & GINGER</div> </a>

<div class="textblock">kale, avocado, NH slab bacon, local apples, cherries, dried cranberries, sunflower seeds, scallions, red wine vinegar, olive oil</div> </div>