javascript - CSS 样式 td 元素取决于 td 宽度

Question

我在 td 中有两个固定宽度的元素。在桌面上，它们并排显示，在较小的显示器上，它们被包裹起来，因此第二个元素位于第一个元素的下方。

只有当第二个元素(第二个红色 div)显示在第一个元素下方时，我如何才能定位第二个元素？

示例:

table {
  border: 1px solid #000;
}
table td:nth-child(1) div {
  background: red;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 10px;
}
table td:nth-child(2) div {
  background: #777;
  display: inline-block;
  height: 20px;
  width: 200px;
}
.two {
width: 100px;
}

Table 1:
<table>
  <tr>
    <td><div></div><div></div></td>
    <td><div></div></td>
  </tr>
</table>
<br>
Table 2:
<table class="two">
  <tr>
    <td><div></div><div></div></td>
    <td><div></div></td>
  </tr>
</table>

Answer 1

您的 HTML 和 CSS 不“了解”您的页面当前的外观，因此您不能根据第二个 div 是否包裹在第一个 div 下方来确定它们的目标。

您可以做的是找出它们何时换行，然后使用媒体查询。

通过在 body 标签上设置 max-width 在 Chrome 的控制台中试玩，我发现它们在 334px 宽之前不会换行。

所以你的样式看起来像这样:

@media all and (max-width: 334px) {
  td.WiFi div:nth-child(2) {
    border: 2px solid red; /* or whatever */
  }
}

现在，如果您为表本身和/或其某些列设置了固定值，那么当所有内容都不合适时，您可能能够通过数学计算，并将其用作您的媒体查询。但我看不到使用当前样式在您的网站上执行此操作的方法，因为唯一具有固定宽度的是 SVG，其他所有内容均以百分比表示。所以整个事情非常灵活，除非绝对必要，否则它不会包装。不过不用担心，这通常是件好事。

您可能遇到问题的唯一边缘场景是您的字体未正确加载，因此用户看到的页面带有一些后备字体，因为现在您的列换行的点基本上取决于宽度其他列中的文本恰好是。如果使用不同的字体，您可能会得到不同的断点，这可能会或可能不会导致几个像素的布局中断。

不过，这对您来说可能不是一个实际问题，因为没有人会在桌面(即具有可调整大小的窗口的设备)上以 334 像素宽查看您的网站，而手机基本上是 360 像素以上或 320 像素宽. 330s 和 340s 中的潜在问题区域实际上并不存在。