CSS合并样式问题

Question

我有一个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。我所尝试的一切都是为了避免重复，并且基本上拥有之前带有重复项的内容。

- Ted

---

你提到的“组合”被称为多类，表示在标签中有多个类，你只需要用空格分隔每个类即可。 - jackJoe

Answer 1

您可以为一个元素指定多个类：

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

您只需要在它们之间加上一个空格即可。

- Ibu

---

太棒了！谢谢！我还不能给你评分，但我在这里给你点赞。 :) - Ted

Answer 2

这是因为多类不能有句号，你需要一个空格，像这样：

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

- jackJoe

Answer 3

这应该按预期工作。

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

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

- Eddie

Answer 4

试试这个：

.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;}

- Litek