Question

我的布局相当简单，如下所示：

<div class="card">
    <span class="attack">1</div>
    <span class="defence">2</div>
</div>

他们用简单的display: block排列在彼此之上。我想要实现的是当牌位于特定区域时，“攻击”显示在底部，“防守”位于顶部。我知道我可以使用jQuery来实现它，但是我可以使用纯CSS实现相同的效果吗？

Answer 1

从技术上讲，这是一个业务规则，它不是化妆品层的域。

在HTML文档中，从头到尾的元素顺序具有语义含义 - 我怀疑你的情况并没有不同，因为你试图指出从一个元素到下一个元素的重要性差异（在文档中），而不仅仅是视觉表示）取决于上下文。

因此，您的方法应该是JQuery，或者根据文档中的顺序更改这两个元素关系含义的其他方法。 CSS旨在改变它们的外观。

在这样的情况下，思考“如果有人看不到元素，并且不得不依赖屏幕阅读器按照它们在文档中出现的顺序阅读它们会有什么帮助？这些信息是否有用？只是两个元素的内容，但他们的关系仍然是正确和可理解的？“

您可能无意让盲人可以访问此内容，但对于如何解决此类问题，这通常是一个很好的理智检查。

Answer 2

我很确定这会奏效：

.card {
    width: 100px;
    height: 150px;
    float: left;
}

.attack, .defence {
    width: 100px;
    height: 75px;
    clear: right;
}

/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
    float: left;
}
.attack-top .card .defence {
    float: right;
    height: Wpx;
    padding-top: Xpx;
}


/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
    float: right;
    height: Ypx;
    padding-top: Zpx;
}
.defence-top .card .defence {
    float: left;
}

您的说明中缺少一些细节，因此我会尝试填写我的假设，如果它们有效，您可以告诉我。

你说“当卡片在特定区域时”。我假设这些区域可以由不同的包含类（.attack-top和.defence-top表示，但您可以根据需要重命名。）
我假设.card宽100像素，高150像素。如果这些宽度和高度值错误，请填写正确的值并进行相应的重新计算。如果.card没有固定的宽度/高度，它可能仍然有效，但我不太自信，你将无法获得底部文字到卡片的最底部（只是在顶部文字下方。）

Answer 3

首先想到的是在.card中使用绝对定位。

.card      { width:100px; height:50px; position:relative; }
  .attack  { width:100px; height:25px; position:absolute; top:25px; }
  .defense { width:100px; height:25px; position:absolute; top:0; }

在这个例子中，.attack将在（视觉上）低于.defense。但请注意，如果禁用CSS，将会看到真正的安排。

Answer 4

不，你不能。即使您决定尝试在CSS中“破解”它，生成的CSS也会变得庞大，混乱，并且不易维护。通过比较，易于理解和易于维护，相应的jQuery代码将非常简单。

Answer 5

如果您知道元素的高度，则可以使用position: relative（分别为正值和负值）或position: absolute。但这非常hacky并伴随着很多副作用 - 我会用Javascript代替它。

Answer 6

您可以使用（如果您只想在div.card中进行交换）：

.card .attack {
   position: relative;
   top: 1em;
}
.card .defence {
   position: relative;
   top: -1em;
}

但正如其他人所说，这会产生一些意想不到的副作用。例如。上面的示例只能为1行块正确移动交换位置。

使用CSS交换元素？

6 个答案: