CSS nicht wie erwartet

Question

Ich habe eine Website erstellt, und alles hat wie erwartet funktioniert, bis ich plötzlich nichts auf der gleichen Zeile angezeigt bekommen konnte, obwohl ähnliche Code zuvor auf dieser Website gearbeitet hat. Die Seite zeigt Bilder auch anders an, obwohl es das gleiche Bild und div CSS ist. Ich baue auf Drupal mit HTML und CSS auf. Mein HTML-Code ist

<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> 

Meine CSS ist:

.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

klar entfernen: both; Eigenschaft aus dem .foodblock-Selektor in Ihrem CSS. Dadurch werden Ihre Spalten inline angezeigt.