html - 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。 我努力实现的目标是没有重复项，并且基本上拥有重复项。

Answer 1

您可以为一个元素分配多个类:

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

你只需要在它们之间留一个空格