html - CSS 未按预期显示

Question

我一直在构建一个网站，一切都按预期工作，直到我突然无法在同一行上显示任何内容，即使类似的代码之前在这个网站上运行过。该网站还以不同方式显示图像，即使它是相同的图像和 div CSS。我正在使用 HTML 和 CSS 在 Drupal 上进行构建。我的 HTML 代码是

<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"></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"></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"></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"></div></div>

我的CSS是:

.foodblock{
    float: left;
    clear: both;
    margin: 15px;
    height: 300px;
}
.textblock{
    float: left;
}
.spicy-avocado-lime{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
}
.toasted-almond-ginger{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
}
.local-apple-bacon-bowl{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
}
.power-bowl{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
}/*for mobile phones: */
    [class*="col-"]{
        width:100%;
    }

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8%;}
    .col-m-2 {width: 16%;}
    .col-m-2-5 {width: 21.55%;}
    .col-m-3 {width: 24%;}
    .col-m-4 {width: 32.5%;}
    .col-m-5 {width: 40%;}
    .col-m-6 {width: 48%;}
    .col-m-7 {width: 56%;}
    .col-m-8 {width: 65.7%;}
    .col-m-9 {width: 72%;}
    .col-m-10 {width: 80%;}
    .col-m-11 {width: 88%;}
    .col-m-12 {width: 96%;}
}
@media only screen and (min-width: 768px){
    /*for mobile desktop: */
    .col-1 {width: 8%;}
    .col-2-5 {width: 21.55%;}
    .col-2 {width: 16%;}
    .col-3 {width: 24%;}
    .col-4 {width: 32.5%;}
    .col-5 {width: 40%;}
    .col-6 {width: 48%;}
    .col-7 {width: 56%;}
    .col-8 {width: 65.7%;}
    .col-9 {width: 72%;}
    .col-10 {width: 80%;}
    .col-11 {width: 88%;}
    .col-12 {width: 96%;}
}

Answer 1

删除清除:两者； CSS 中 .foodblock 选择器的属性。这将显示您的内联列。