Question

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

如果第二个元素（第二个红色div）显示在第一个元素（第二个红色div）的下方，我将如何定位第二个元素

实施例

＆＃13;

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;
}

＆＃13;

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>

＆＃13;

Answer 1

您的HTML和CSS不是＆＃34;意识到＆＃34;当前页面的外观如何，因此根据第二个div是否包含在第一个div之下，您无法直接定位它们。

你可以做的是在包装时弄清楚，然后使用媒体查询。

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

所以你的风格看起来像这样：

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

现在，如果您有表格本身和/或某些列的固定值，您可能可以在所有内容都不合适的情况下以数学方式计算出来，并将其用作媒体查询。但是我没有在你的网站上看到使用当前样式的方法，因为唯一具有固定宽度的东西是SVG，其他一切都是百分比。所以整个过程非常灵活，并且在它绝对不得不包装之前它不会包装。不用担心，这通常是一件好事。

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

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

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

实施例

1 个答案: