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>

它没有按预期工作，我也试过跨度。我试图实现的是没有重复，并且基本上拥有我之前的重复项。

Answer 1

您可以为元素分配多个类：

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

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

Answer 2

那是因为多班级不能有句号，你需要一个空格，如下所示：

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

Answer 3

这应该按预期工作。

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

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

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

CSS结合样式问题

4 个答案: