CSS, сочетающий стили, вопрос - PullRequest
Новая
       3

CSS, сочетающий стили, вопрос

2 голосов
/ 01 июля 2011

У меня есть div, который разделен на две части. Лево и право. это началось как: 

main-bottom-div-left{ 
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;


    **float:left;**
}

main-bottom-div-right{ 
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;


    **float:right;**
}

Я думал, что было бы разумнее иметь что-то подобное 

main-bottom-div {
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;
}

.left {
    float:left;
}


.right {
    float:right;
}

И как-то ссылаться на каждого с чем-то вроде 

<div class="**main-bottom-div.right**"></div>
<div class="**main-bottom-div.left**"></div>

Это не работает, как ожидалось, я также пробовал span. Все, чего я пытаюсь добиться - это без дубликатов , и, в основном, то, что у меня было до с дубликатами.

Ответы [ 4 ]

6 голосов
/ 01 июля 2011

Вы можете присвоить элементу несколько классов: 

<div class="main-bottom-div right"></div>
<div class="main-bottom-div left"></div>

Все, что вам нужно, это поставить пробел между ними

1 голос
/ 01 июля 2011

Это должно работать как положено. 

<div class='main-bottom-div left'>
   Test
</div>

<div class='main-bottom-div right'>
    Test
</div>
1 голос
/ 01 июля 2011

потому что у мультикласса не может быть точки, вам нужен пробел, например: 

<div class="main-bottom-div right"></div>
<div class="main-bottom-div left"></div>
0 голосов
/ 01 июля 2011

попробуйте это: 

.main-bottom-div-left,
.main-bottom-div-right { font-family: Arial; font-size: 25px; font-weight: bold; color: #5c5622; width:348px; margin-left:10px; padding-right:7px; margin-right:0px; margin-top:5px; height:30px; background-color:#d9d4a5; float:left;}
.main-bottom-div-right { float:right;}
...