CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 458

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

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.

Upvotes: 0

Views: 156

Answers (2)

Simp4Code
Simp4Code

Reputation: 1479

Done using display: grid; and CSS variables for the color

body { font-family: sans-serif; margin: 0 }
* { box-sizing: border-box }

p {
  display: grid;
  grid-template-columns: 20px 20px 20px 1fr;
  grid-template-rows: 1fr;
}

p .outlineS, p .outlineO {
  grid-column-start: 1;
  grid-column-end: 2;
}

p .graphicS, p .graphicO {
  grid-column-start: 2;
  grid-column-end: 3;
}

p .textS, p .textO {
  grid-column-start: 3;
  grid-column-end: 4;
}
P span:last-child {
  grid-column-start: 4;
  grid-column-end: 5;
  
  margin-left: 0.5rem;
}

p span:not(:last-child) { height: 20px }

p span:not(:last-child)::before {
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: 100%;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  transform: translate(2.5px, 2.5px);
}

.outlineS::before { --background: blue; --border: blue; }
.outlineO::before { --background: transparent; --border: blue; }

.graphicS::before { --background: green; --border: green; }
.graphicO::before { --background: transparent; --border: green; }

.textS::before { --background: yellow; --border: yellow; }
.textO::before { --background: transparent; --border: yellow; }
<p>
  <span class="outlineS"></span>
  <span class="graphicO"></span>
  <span class="textS"></span>
  <span>Item 1</span>
</p>
<p>
  <span class="outlineS"></span>
  <span>Item 2</span>
</p>
<p>
  <span class="graphicS"></span>
  <span>Item 3</span>
</p>
<p>
  <span>Item 4</span>
</p>

Upvotes: 0

WebKing
WebKing

Reputation: 301

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

Upvotes: 1

Related Questions