Div format for list

Question

Div format for list

Navigation

#1 by (0 votes)

2

I'm trying to be able to make a format for a list that will be generated by a ng-repeat . I want to get something like this (Beforehand I ask for forgiveness for my design, it is that I am pesimo in css xD)

Where those circles will be user images that I already have so I have no problem.

The issue is that I have achieved this:

<div style="width: 40px;height: 40px;background-color: red;float: left;margin-left: 15px;">
</div>
<div style="width: 40px;height: 40px;background-color: blue;float: left;margin-top: 25px;z-index: 1000;margin-left: -15px;">
</div>
<div style="width: 40px;height: 40px;background-color: red;float:right;margin-right: 15px;">
</div>
<div style="width: 40px;height: 40px;background-color: blue;float: right;margin-top: 25px;z-index: 1000;margin-right: -15px;">
</div>

I have not been able to put the text next to each div.

html css

asked by sioesi 05.05.2017 в 17:14

source

1 answer

I reject app in IOS [closed] Problems with the solictud Post made python from a form made in laravel

score 0 · Accepted Answer

I think this will help

<div style="width: 40px;height: 40px;background-color: red;float: left;margin-left: 15px;">
  <div style="position: relative;right: -50px;width: 100px;top: 50%;transform: translateY(-60%)">Usuario 1</div>
</div>
<div style="width: 40px;height: 40px;background-color: blue;float: left;margin-top: 25px;z-index: 1000;margin-left: -15px;">
  <div style="position: relative;right: -50px;width: 100px;top: 50%;transform: translateY(-60%)">Usuario 2</div>
</div>
<div style="width: 40px;height: 40px;background-color: red;float:right;margin-right: 15px;">
  <div style="position: relative;left: -110px;width: 100px;top: 50%;transform: translateY(-60%); text-align: right; ">Usuario 3</div>
</div>
<div style="width: 40px;height: 40px;background-color: blue;float: right;margin-top: 25px;z-index: 1000;margin-right: -15px;">
  <div style="position: relative;left: -110px;width: 100px;top: 50%;transform: translateY(-60%); text-align: right; ">Usuario 4</div>
</div>