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

答

删除明确：两者;属性来自你的css中的.foodblock选择器。这将显示您的列内联。

谢谢，我以为我已经尝试删除它，但显然不是。这解决了如果不是内联显示的问题。虽然仍然存在显示比所有其他图像更小的功率碗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没有像预期的那样显示

相关推荐