Home / Questions / 67720
Accepted
sioesi
Asked: 2020-05-06 07:14:33 +0800 CST 2020-05-06 07:14:33 +0800 CST

div format for list

  • 772

I am trying to get to be able to do a format for a list that will be generated by a ng-repeat. I want to get something like this (Before hand I apologize for my lousy design, I'm lousy at css xD)

enter image description here

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

The thing is, I got 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

1 Answers

  1. Best 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>

    • 0