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 的控制台中玩耍，我发现它们直到 334 像素宽才换行。

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

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

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

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

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