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

我猜你的问题是关于“羽衣甘蓝和谷物碗”没有显示出来。如果是，请关闭属性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>

Answer 2

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

https://jsfiddle.net/7gohamt3/

例如，您错过了此行的结束语：

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

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

Answer 3

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

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

https://jsfiddle.net/x1x6gjw4/

Div拒绝垂直堆叠在一起

3 个答案: