how to stop images from stacking on top of each other

Question

Im using angularjs to loop over an array of images and they are all getting displayed on top off each other.

    .modifier-list-icon {
      left: 5px;
      position: absolute;
      top: auto;
    }

    .icon-small {
      height: 20px;
      width: 20px;
    }

<span ng-if="list.images" ng-repeat="image in list.images">
  <img ng-src="{{image.url}}" alt="Icon"
       class="icon-small modifier-list-icon"/>
</span>

this is how the images look like with the code from above.

I changed the position to position: relative; ^^

I want both of the images to display next to each other like the second screenshot but I want the images to be placed to the left like the first screenshot.

Answer 1

Hope below code example will solve your problem. If there is any other condition, please let me know.

body {
	font: 16px "Roboto", Arial, sans-serif;
}
.block {
	padding: 10px;
	margin: 0 0 20px;
}
.block h3 {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
}
ul{
  margin:0;
  padding:0;
  list-style:none;
}
li {
	display: table;
	width: 100%;
	margin: 0 0 10px;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
}
.actions {
	display: table-cell;
	white-space: nowrap;
}
.actions img {
	margin-left: 10px;
}
.actions img:first-child {
	margin-left: 0;
}
.title {
	display: table-cell;
	padding: 0 30px 0 10px;
	text-align: right;
	position: relative;
	vertical-align: middle;
}
.title img {
	position: absolute;
	right: 0;
	top: 0;
}
.list2 li {
	display: flex;
}
.list2 .title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

<div class="block">
 <h3>List with wrap title</h3>
 <ul>
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
   <div class="title"><span>Small Title</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
   <div class="title"><span>Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
     width="20"></div>
   <div class="title"><span>Long Title with multiple action</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <ul>
</div>
<div class="block">
 <h3>List with truncate title </h3>
 <ul class="list2">
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
   <div class="title">Small Title<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
   <div class="title">Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <li>
   <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
     width="20"></div>
   <div class="title">Long Title with multiple action<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
  </li>
  <ul>

Answer 2

I tend to prefer a flexbox solution for these kinds of things. I repeated the entry once so you can see how shorter labels will cause the right side to shrink, but all of the nested elements stay positioned:

.container {
  border: 1px solid black;
  /* 
     by using display flex, we let the child containers use as much
     width as they need, and we can keep their text-alignment separate
  */
  display: flex;
}

.icon-container,
.label-container {
  /*
     flex grow is set to 1 and flex-basis to auto so that the child elements
     will stretch to use all the available horizontal space.
     one or the other could be dropped here
  */
  flex: 1 1 auto;
  border: 1px solid red;
  display: inline-block;
}

.icon-container>*,
.label-container>* {
  border: 1px solid black;
}

.label-container {
  /* 
     creating the white space between the left-side icons and
     right-side label/icon is just a matter of having
     text-alignments
  */
  text-align: right;
}

<div class="container" ng-if="list.images" ng-repeat="image in list.images">
  <div class="icon-container">
    <img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
    <img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
  </div>

  <div class="label-container">
    <span>some text very long text on the right side</span>
    <img alt="another icon" />
  </div>
</div>

<div class="container" ng-if="list.images" ng-repeat="image in list.images">
  <div class="icon-container">
    <img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
    <img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
  </div>

  <div class="label-container">
    <span>another entry</span>
    <img alt="another icon" />
  </div>
</div>

Answer 3

Remove position: absolute and position relative, apply display: inline-block