Geek asks and answers

Percentage Width Range

As with tables

TD WIDTH 25    TD WIDTH 75

this is what I want to achieve with DIV / SPAN. All I have:

  <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 />

but then it spans the new line. Works with fixed (px) sizes.

+3
source share
2 answers

use float

  <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 />
+4
source

The problem is the gap between the two spans.

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

They have a space between them, so all this will not correspond 100%; it is 100% plus the width of the space in width.
If you delete a new line between two spans, it will work.

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

More articles:


All Articles