Error giving spaces between divs

Question

Error giving spaces between divs

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a problem with space in some divs, here is the code below:

HTML:

<div id="feira"> 
     <div class="barraca"></div> 
     <div class="barraca"></div> 
     <div class="barraca"></div>
</div>

CSS:

#feira{
   position: fixed;
   right: 0;
   bottom: 0;
   z-index: 55;
   width: 80%;
}

.barraca{
   position: absolute;
   right: 0;
   bottom: 0;
   background: #AAA;
   width: 250px;
   height: 200px;
}

Now to leave the tents separate I'm using this algorithm in Jquery, but it's not working, because the 2nd booth it says it has left: 0; and one tent is behind the other.

Jquery:

function organizar(){
   qtdJanela = $(".barraca").size();
   if(qtdJanela > 1){
      for(c = 0; c < qtdJanela; c++){
          janela = $(".barraca").eq(c);
          posJanela = janela.position();
          distancia = posJanela.left;
          alert(distancia);
          $(".barraca").eq(c+1).css({'right':distancia+'px'});
      }
   }
}

It has an hour that it displays 0 in the distance.

link

javascript html jquery css

asked by anonymous 10.11.2015 / 13:52

2 answers

Ajax code is not taking the value of the inputs Data conversion error

score 1 · Answer 1

To perform this activity, follow the code below:

HTML Code:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Teste</title>
        <link rel="stylesheet" type="text/css" href="layout.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><scripttype="text/javascript" src="func.js"></script>
    </head>
<body>

<div id="feira"></div>
<button>Organizar</button>

</body>
</html>

CSS Code:

#feira{
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 150px;
    border:3px solid #73AD21;
    padding: 10px;
}

.barraca {
   display: inline-block;
   background-color: #AAA;
   position: relative;
   width: 100px;
   height: 150px;
   right: 0px;
   border: 3px solid #73AD21;
   margin-left: 5px;
}

jQuery code:

$(document).ready(function() {
    $("button").click(function() {
        var aumentarLargura = $("#feira").width();
        aumentarLargura += $(".barraca").width() + 10;
        $("#feira").width(aumentarLargura + "px");
        $("#feira").append("<div class=\"barraca\"></div>");
    });
});

To view, follow the link below:

Spacing between divs via jQuery

score 0 · Answer 2

Although you can use jQuery, you should use css instead. To give the spacing just use the property margin. It would look like this:

.barraca{
margin: 15px; // junto com as propriedades que você usou
}

With this css above, you would have a spacing of 15 pixels in all directions.