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

Posted 2023-03-05

【中文标题】CSS 样式 td 元素取决于 td 宽度

【英文标题】：CSS style td elements depending on td width

【发布时间】：2018-01-03 11:41:47

【问题描述】：

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>

【问题讨论】：

在您的实际场景中，表格和红色 div 是否总是固定宽度（或者可能是）？

【参考方案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 中的潜在问题区域实际上并不存在。

【讨论】：

假设这将是答案，我将诉诸“混乱”的 javascript hack

对不起，我对你没有任何魔法。您拥有的另一个选择是尝试在某个时候强制换行，然后再次使用媒体查询。我不知道，这可能比 JavaScript 复杂，也可能不复杂。祝你好运！