Я пытаюсь поплавать своими 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;
}
Я пропустил что-то простое?
У вас не может быть классов, начинающихся с цифры... измените их на имя, начинающееся с буквы, и оно начнет работать.
В вашем изменении HTML...
<div class="1">
Для того, чтобы...
<div class="a1">
И в вашем изменении CSS
.1 {
Для того, чтобы...
.a1 {
(Вы также должны избегать выполнения каких-либо дизайнерских работ в Dreamweaver... он создаст большой сложный HTML-код. Вам лучше изучить HTML и CSS, чтобы у вас было хорошее представление о том, что делает страница)
Имена классов должны начинаться с буквы. Вы используете класс с именем 1
. Это не работает. Измените его, например, на букву или, возможно, на что-то более описательное. Пример: http://jsfiddle.net/q2MFp/2/
вы не можете использовать "1" в качестве селектора классов
измените его на другое имя, и оно будет работать
измените объявление класса .1{}
на .parent > div{}
или дайте ему другое имя, кроме 1
.
имена классов, начинающиеся с цифр.
см. здесь: http://jsfiddle.net/q2MFp/7/
надеюсь, это поможет.
1
не является допустимым именем класса, one
или number1
является.
Имя вашего класса не может быть числовым значением, замените "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;
}
Измените имя класса CSS 1
на другое имя и выполните код в своем приложении. Как это.
.colour {
float:left;
width:30px;
height:30px;
background-color:#CC0000;
}