CSS元素宽度逐步增加

Question

  

更新：请参阅问题底部的图片。

所以我有一组输入和复选框，现在要求复选框和文本输入对齐;所以我想“逐步”输入的大小。

复选框很好，宽度为160像素，在设备屏幕宽度上尽可能多地水平排列，但我需要一些方法来获得文本框的大小，以适应相同的大小，例如： / p>

整体容器大小仅在文本框容器大小为76％时才重要

  

文本框容器：608px
  文本框大小：480px（160 x 3）
  行中的复选框：3

     

文本框容器：532px
  文本框大小：480px（160 x 3）
  行中的复选框：3

     

文本框容器：380px
  文本框大小：320像素（160 x 2）
  行中的复选框：2

     

文本框容器：304px
  文本框大小：160px（160 x 1）
  行中的复选框：1

要清楚 如果容器宽度为380px，那么其中的文本框将需要像内联块复选框一样，并且只有320px宽，因为下一个步骤将是{{1}这将比容器宽。

因此文本框的宽度在“步长”中增加，等于复选框的宽度（160px，但是这将是硬编码的，因为它一旦设置就不会改变）。

以下是我目前的代码;而且我真的不知道该问题在哪里。是否有某个短语需要搜索，有一些措辞可以找到可能的解决方案。

也;而HTML是表格格式;在这种情况下，我认为这不应该太重要，因为320+160 = 480px元素只是一个单元格容器，就像div一样，等等。

<input>

.catitem {
    width: 160px;
    display: inline-block;
    border:1px solid #090;
}
table {
    width: 100%
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}
table tr:nth-of-type(2n+1) {
  background-color:#eaeaea;
}
 table tbody tr td:first-of-type {
    width: 24%;
    min-width: 55px;
    font-weight: bold;
    box-sizing: border-box;
    padding-left: 1rem;
    }
table tr td:nth-of-type(2) input[type="text"] {
  width:82%;            /* THIS bit needs changing */
  max-width:500px;      /*                         */
 }

图片说明：

当容器宽度小于2步（160 x 2）时，将显示1步宽度;当容器元素小于3步宽（160 x 3）等时，将显示两步宽度。

在上图中，所有框都应该是邮政编码框的宽度，当容器缩小时，它们会缩小到标题输入框的宽度，但不会使用任何中间宽度。

Answer 1

要获得比媒体查询更动态的结果，您可以尝试使用CSS calc（）进行结构化：https://www.w3schools.com/cssref/func_calc.asp

所以你有宽度：（100％ - 160px）;对于每个容器，并且容器集的最大宽度要么固定（如果你对它们没问题），要么使用Bootstrap或类似设置基于页面中的列设置最大宽度。