html - 如何使 "Graphics"之间的长宽适中

Question

我想让图形的长度和宽度有适当的距离。
但这并不顺利。

“tr”和“th”需要相同的距离。
像这样的效果:



图形之间的距离总是不同的。

我能怎么做？

下面是我的代码，item之间宽度的距离不对。

谢谢

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

tr {
  display: block;
  margin: 1px 0;
}

<form>
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>
    <table id="ConnectionMonitorTable">
      <thead>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>

          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect  width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
      </thead>
    </table>
  </fieldset>
</form>

非常感谢

Answer 1

我会使用 CSS Grid 来解决这个问题。除了用 div 包围每个街区之外包装器，我创建了一些基本的网格规则。网格类型使用auto placement .使用 grid-gap , 格子至少会有 30px它们之间的间距。如果页面很宽，间隙自然会增加。希望您可以开始看到 CSS Grid 在处理此类布局方面的强大功能。

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  …
}

演示

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  padding: 0 30px 15px;
}

.item-container .item:not(:first-child) {}

<form action="">
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>

    <div class="item-container">
      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

    </div>

  </fieldset>
</form>

jsFiddle