class - 相同的 DIV 两次不同的浮点数？

Question

我试图通过没有这么多的 div id 来清理我的代码。据我了解，您不应该多次使用相同的 div id。

的HTML：

<div id="sides" class="alignLeft"></div>
<div id="sides" class="alignRight"></div>
<div id="center"></div><!--center-->

CSS：

.alignLeft {
   float: left;
}
.alignRight {
   float: right;
}
#sides {
   width: 350px;
   height: 45px;
}
#center {
   width: 350px;
   height:350px;
}

如您所见，我在 html 中使用了两次 #sides div，但应用了不同的浮点类（左、右）。即使代码似乎有效，但我知道它是不正确的。使用具有不同浮点数的相同 div 的正确方法是什么？

Answer 1

是的，id 选择器每页只能使用一次。你可以重构你的代码看起来像这样。

HTML

<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->

CSS

.alignLeft {
   float: left;
}
.alignRight {
   float: right;
{
.sides {
   width: 350px;
   height: 45px;
}
#center {
   width: 350px;
   height:350px;
}

Answer 2

您可以将多个类分配给一个元素，因此您可以将sides其用作类而不是 id：

的HTML：

<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->

CSS：

.alignLeft {
   float: left;
{
.alignRight {
   float: right;
{
.sides {
   width: 350px;
   height: 45px;
}
#center {
   width: 350px;
   height:350px;
{