CSS组合样式问题
我有一个分为两部分的 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>
它不会按预期工作，我也尝试过跨度。 我试图实现的目标是没有重复项，并且基本上拥有我之前有重复项的内容。
I have a div that is divided into two parts. left and right.
it started as :
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;**
}
I was thinking that it would make more sense to have something like this
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;
}
And to somehow refer to each with something like
<div class="**main-bottom-div.right**"></div>
<div class="**main-bottom-div.left**"></div>
It doesn't work as expected, I also tried span.
All I try to achieve is not having duplicates, and basically have what I had before with the duplicates.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以为一个元素分配多个类：
您所需要做的就是在它们之间放置一个空格
you can assign multiple class to an element:
all you need is to put a space between them
那是因为多类不能有句点，你需要一个空格，如下所示：
that's because multi class can't have a period, you need a space, like this:
这应该按预期工作。
This should work as expected.
试试这个：
.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;}try this:
.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;}