Где мои дивы идут не так?

0

Я пытаюсь поплавать своими divs рядом друг с другом, и это прекрасно выглядит в Dreamweaver, но когда я живу, просмотрите его, это испортится.

HTML

 <div class="parent">

    <div class="1">a</div>
    <div class="1">b</div>
    <div class="1">c</div>
        <div class="1">d</div>
            <div class="1">e</div>
                <div class="1">f</div>
                    <div class="1">g</div>


    </div>

CSS

.parent {
    display:inline-block;
    width:300px;
    height:50px;
}

.1 {
    float:left;
    width:30px;
    height:30px;
    background-color:#CC0000;
}

http://jsfiddle.net/q2MFp/

Я пропустил что-то простое?

  • 0
    Я думаю, что мы все получили это одновременно
Теги:

8 ответов

3
Лучший ответ

У вас не может быть классов, начинающихся с цифры... измените их на имя, начинающееся с буквы, и оно начнет работать.

В вашем изменении HTML...

<div class="1">

Для того, чтобы...

<div class="a1">

И в вашем изменении CSS

.1 {

Для того, чтобы...

.a1 {

См. Обновленный JSFiddle

(Вы также должны избегать выполнения каких-либо дизайнерских работ в Dreamweaver... он создаст большой сложный HTML-код. Вам лучше изучить HTML и CSS, чтобы у вас было хорошее представление о том, что делает страница)

  • 0
    Спасибо! Я не знал, что ты не можешь начать класс с числа. Я почесал голову о своем коде, потому что был уверен, что у меня была правильная запись.
  • 0
    Не проблема @ Адси, рад, что смог помочь :-) Большинство веб-разработчиков пишут свой код с нуля и избегают редакторов WYSIWYG по причинам, которые я уже изложил. Это также подчеркивает, что Dreamweaver не особенно хороший инструмент, если он позволяет использовать цифру в начале имени класса. Удачи с остальной частью вашего проекта :-)
0

Имена классов должны начинаться с буквы. Вы используете класс с именем 1. Это не работает. Измените его, например, на букву или, возможно, на что-то более описательное. Пример: http://jsfiddle.net/q2MFp/2/

0

вы не можете использовать "1" в качестве селектора классов

измените его на другое имя, и оно будет работать

0

измените объявление класса .1{} на .parent > div{} или дайте ему другое имя, кроме 1.

имена классов, начинающиеся с цифр.

см. здесь: http://jsfiddle.net/q2MFp/7/

надеюсь, это поможет.

0

http://jsfiddle.net/q2MFp/3/

1 не является допустимым именем класса, one или number1 является.

0

Измените имя класса CC "1" на что угодно: "test"

.parent {
display:inline-block;
width:500px;
height:50px;

}

.test {
float:left;
width:30px;
height:30px;
background-color:#CC0000;

}

заселение: jsfiddle

0

Имя вашего класса не может быть числовым значением, замените "1" любой комбинацией символов, и оно начнет работать.

 <div class="parent">

    <div class="my_div">a</div>
    <div class="my_div">b</div>
    <div class="my_div">c</div>
    <div class="my_div">d</div>
    <div class="my_div">e</div>
    <div class="my_div">f</div>
    <div class="my_div">g</div>

 </div>

.my_div {

        float:left; 
    width:30px;
    height:30px;
    background-color:#CC0000; 
}
0

Измените имя класса CSS 1 на другое имя и выполните код в своем приложении. Как это.

.colour {
    float:left;
    width:30px;
    height:30px;
    background-color:#CC0000;
}

http://jsfiddle.net/q2MFp/15/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню