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