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两次但是应用了不同的float类（左，右）。尽管代码似乎有用，但我知道这是不正确的。使用不同浮点数的相同div的正确方法是什么？

Answer 1

是id 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;
{

相同的DIV两次不同的花车？

2 个答案: