Question

我将几张表（display: inline-block＆amp;固定列宽：140px）并排分开100px边距。
►CodePen / Original code

当我调整窗口宽度以使线条不会太快崩溃时，我希望这些边距减少。我确实找到了一种方法来做到这一点，但这很黑，我不太喜欢这种解决方案 ►CodePen / Hacky solution

例：

<div class="tab_centre" style="font-size: 0px;">
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 3a</th><th class="etat0">Env 3b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 4a</th><th class="etat0">Env 4b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 5a</th><th class="etat0">Env 5b</th></tr></thead><tbody><tr><td>v1.1+</td><td>v1.1+</td></tr></tbody></table>
</div>

有没有办法避免max-width: 100px; width: calc(100vw - 840px - 135px);？插入'calc'中的值是一个命中注定。

Answer 1

您应该以百分比而不是px来提供保证金。

margin-right: 2%;

调整窗口大小时“内联块”的动态宽度

1 个答案: