html - 具有百分比宽度的跨度

Question

就像桌子一样

TD WIDTH 25    TD WIDTH 75

这就是我想通过 DIV/SPAN 实现的目标。我所拥有的：

  <span style="background-color: green; width: 25%; display: inline-block;">1</span>
  <span style="background-color: yellow; width: 75%; display: inline-block;">2</span><br />
  <span style="background-color: green; width: 25%; display: inline-block;">a</span>
  <span style="background-color: yellow; width: 75%; display: inline-block;">b</span><br />

但随后将 span 放到新行。它适用于固定 (px) 大小。

Answer 1

使用浮动

  <span style="background-color: green; width: 25%; float:left;">1</span>
  <span style="background-color: yellow; width: 75%; float:right;">2</span><br />
  <span style="background-color: green; width: 25%; float:left;">a</span>
  <span style="background-color: yellow; width: 75%; float:right;">b</span><br />

Answer 2

问题在于两个跨度之间的空白。

<span style="display:inline:block; width:25%">..</span>
<span style="display:inline:block; width:75%">..</span>

它们之间有一个空间，所以整个东西不会 100% 适合；它是 100% 加上空间宽度的宽度。
如果您删除两个跨度之间的换行符，它将起作用。

<span style="display:inline:block; width:25%">..</span><span etc...>