How can I place a variable number of images in a defined space using CSS?

Issue

Here is a picture of what I am trying to accomplish:

enter image description here

I want to have various lines of text, probably in a <p>, with a variable number of images in front (up to 3, with two variations each, empty circles and filled dots, as shown). Each item can have zero to three images. If showing, blue is always on the left, green in the middle and yellow on the right.

I tried putting the images as a background-image within a span, but could not figure out how to make the margins/padding to work in this variable condition.

<style>
  p { display: block; }
  span { padding: 0 36px; display: inline-block; vertical-align: middle; }
  .outlineS { padding: 10px 12px; background-image: url('img/circle-blue.png'); background-repeat: no-repeat; }
  .outlineD { padding: 10px 12px; background-image: url('img/dot-blue.png'); background-repeat: no-repeat; }
  .graphicS { padding: 10px 12px; background-image: url('img/circle-green.png'); background-repeat: no-repeat; }
  .graphicD { padding: 10px 12px; background-image: url('img/dot-green.png'); background-repeat: no-repeat; }
  .textS { padding: 10px 12px; background-image: url('img/circle-yellow.png'); background-repeat: no-repeat; }
  .textD { padding: 10px 12px; background-image: url('img/dot-yellow.png'); background-repeat: no-repeat; }
</style>

<p><span class="outlineS"></span><span class="graphicD"></span><span class="textS"></span>Item 1</p>
<p><span class="outlineS"></span>Item 2</p>
<p><span class="graphicS">Item 3</p>
<p>Item 4</p>

I am sure I could create a bunch of little span fillers to put wherever I don’t want an image, but at some point it is just creating a lot of messy code for something that seems like it should be more simple.

All ideas are welcome, including using other forms of tags besides the current <p> / <span> approach.

Solution

@Thomas I added the fixed result, hope it is helpful for you~

p {
      padding-left: 90px;
      position: relative;
    }

    p > span {
      width: 14px;
      height: 14px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      border-width: 3px;
      border-style: solid;
    }

    p > span.empty {
      background-color: transparent;
    }

    .outlineS {
      left: 0;
      background-color: blue;
      border-color: blue;
    }

    .graphicS {
      left: 30px;
      background-color: green;
      border-color: green;
    }

    .textS {
      left: 60px;
      background-color: yellow;
      border-color: yellow;
    }
<p><span class="outlineS"></span><span class="graphicS empty"></span><span class="textS"></span>Item 1</p>
    <p><span class="outlineS"></span>Item 2</p>
    <p><span class="graphicS"></span>Item 3</p>
    <p>Item 4</p>

Answered By – alex

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published