2015-10-28 2 views
0

Да, сначала извините, что я боюсь, что этот вопрос уже поднялся. Это просто ответы, которые, похоже, работают для всех, не для меня.Левое плавающее Div, не показывающее цвет после clearfix

В принципе, я хочу, чтобы несколько Div были запущены как меню стиля плитки на моей странице. Как и в меню windows, я добавил изображение. windows menu Я хочу всего 6 плиток в 3 ряда из 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>​

Ап CSS я использовал до попыток clearfix был таков:

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

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

Если это помогает учебнику, которое я пытаюсь адаптировать в соответствии с моими потребностями, это: mrbool. ком/создание мини-метро-стиль меню-в-HTML-и-CSS/26266 (без пробелов, потому что не хватает респ более 2 ссылок)

ответ

0

здесь:

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

У вас нет полуколонки после заполнения - можно было бы убить стили, стоящие за ней.

+0

Я не совсем уверен, что это такое, о чем вы просите о помощи, но вышеприведенная опечатка может быть началом, а мой ввод ниже - это то, что я могу добавить. Вы также можете проверить [flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) для решений макета. Я также создал это перо [здесь] (http://codepen.io/anon/pen/PPeByj) в качестве примера. – Beepye

+0

Ну, это смущает :) Спасибо, что я на самом деле не мог его увидеть Работает отлично с полуколокой – Liam

 Смежные вопросы

  • Нет связанных вопросов^_^