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

删除 clear:both;来自 CSS 中 .foodblock 选择器的属性。这将显示您的 cols 内联。