CSS沒有像預期的那樣顯示

我一直在建設一個網站，一切都按預期工作，直到我突然無法在同一行顯示任何內容，即使在本網站上使用過類似的代碼。該網站也顯示圖像不同，即使它是相同的圖像和div CSS。我正在用HTML和CSS在Drupal上構建。我的HTML代碼CSS沒有像預期的那樣顯示

<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%;} 
}

來源

2016-08-04 P. Burden

刪除明確：兩者;屬性來自你的css中的.foodblock選擇器。這將顯示您的列內聯。

來源

2016-08-04 16:39:37 Vcasso

謝謝，我以爲我已經嘗試刪除它，但顯然不是。這解決了如果不是內聯顯示的問題。雖然仍然存在顯示比所有其他圖像更小的功率碗div圖像的問題。 –

你所有的代碼看起來都是有效的，包括power-bowl在內的所有div都是一樣的。我認爲你已經知道這一點，如果你設置更小的寬度，比如你的col div的20％，他們將會內聯。現在，我沒有完整鏈接到您的圖像，所以我不能看到是否需要將圖像保存爲相同的大小。 power-bowl div看起來更小，因爲其中有兩個單詞，其他div有更多。 Power-bowl div，local-bacon-apple等等div將會繼承col div的大小。 – Vcasso

我的圖像是內嵌的，這要歸功於您清除清除的問題。 div絕對是更小。所有的圖像都是相同的，所以它們應該是相同的大小。我包含一個鏈接到我的網站的圖像。 http://imgur.com/KSlPTEF。字數不應該影響這個，雖然因爲col div的設置寬度不是？ –

CSS沒有像預期的那樣顯示

回答

相關問題