html - clearfix 后左浮动 Div 不显示颜色

Question

是的，首先很抱歉，我已经看到这个问题了。这只是似乎对其他人都有效的答案并不适合我。

基本上我想要一些 Div 作为我的页面上的磁贴样式菜单运行。 类似于 Windows 菜单，我添加了一张图片。 windows menu 我只想要 3 行最多 6 个瓷砖，每行 2 个 我希望它们都具有相同的大小并填充一种颜色，我可以在上面放置文本以显示它们指向的页面。 我的问题是 Div 没有显示文本后面的颜色。他们只显示文本。

我首先在这里尝试了不同的 clearfix 方法，但当它们都不适合我时就删除了它们。无论我使用哪一个，我仍然得到这个结果:screenshot

我使用的 HTML 是:

<div class="TileMenuContainer">
<div class="TileRow">
<div class="tile first">My Bikes</div><div class="tile second">Dream Machines</div>
</div>
<div class="TileRow">
<div class="tile third">I.O.M TT</div><div class="tile fourth">Legends</div>
</div>
<div class="TileRow">
<div class="tile fifth">Rideouts</div>
</div>
</div>​

我在 clearfix 尝试之前使用的 CSS 是这样的:

/*********************** Tiled Menu Addition ********************/
.TileMenuContainer{
    width:90%;
    height:50%;    
}
.TileRow{
    width:auto;
    padding:5px;
    height:auto;
    display:table;  
}
.tile {
	width:200px;
	height:200px;
	margin:0 5px 0 0;
	padding: 2px
	color:#DAA520;
	float:left;
}

.TileSelection{
    background-color: #483D8B;
}

如果它对我试图适应我的需要的教程有帮助，那就是: bool 。 com/creating-a-metro-style-menu-in-html-and-css/26266 (没有空格，因为我没有足够的代表超过 2 个链接)

Answer 1

这里:

.tile {
    width:200px;
    height:200px;
    margin:0 5px 0 0;
    padding: 2px

填充后没有分号 - 可能会杀死落在它后面的样式。