Eviter l'espace entre les 2 lignes

Mammouth du PHP | 725 Messages

30 août 2013, 17:55

Bonjour,

J'ai fais un code, en fin de compte je recois un espace enorme entre la ligne 1 et 4, comment eviter cet espace??

voici le resultat
<html dir="ltr">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"/>
<script type="text/javascript" >
$(function()
{
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});
</script>

<style>
 #container, #container2{
     width:800px; 
     margin: 0 auto; 
 }
.item {
width: 375px;
margin: 5px;
float: left;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word;
}   
    
</style>
</head>


<div id="container">

<div class="item">
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />

</div>
    
<div class="item">
222222222<br />
222222222<br />
222222222<br />
222222222<br />
222222222<br />
</div>
    
<div class="item">
333333333 <br />
333333333 <br />
333333333 <br />
333333333 <br />
</div>
    
<div class="item">
44444444<br />
44444444<br />
44444444<br />
44444444<br />
44444444<br />
</div>

<div class="item">
5555555555<br />
5555555555<br />
5555555555<br />
5555555555<br />
5555555555<br />
</div>    
    
<div class="item">
66666666666<br />
66666666666<br />
66666666666<br />
66666666666<br />
66666666666<br />
</div>      
</div> 
</html>

merci a vous

Mammouth du PHP | 568 Messages

04 sept. 2013, 09:28

Ton problème est lié à la propriété float: left de ta classe css .item, essaye de diminuer le contenu du div contenant les "2", et je te conseille de revoir la propriété float.

Comme solution soit du utilise du js type http://salvattore.com/ soit tu change ta façon d'afficher tes conteneurs.

Mammouth du PHP | 725 Messages

05 sept. 2013, 09:08

merci Yosh, je vais voir le code

Mammouth du PHP | 790 Messages

05 sept. 2013, 09:33

Salut, en fait je pense que c'est l'inverse Yosh, il faut augmenter le contenu de 2 pour que 3 glisse sous 1 et que 4 prenne sa place sous 2...
Tu peux aussi imposer une hauteur fix a tout les item et ca devrait aller...
si non, tu crée 2 colonnes, gauche et droite et dans la gauche, tu met 1, 3, 5 et dans la droite tu met 2, 4, 6...
Les fautes de grammaire et d'orthographe contenu dans mes postes sont sous copyright, vous pouvez les utiliser pour un usage personnelle mais vous ne devrez en aucun cas les utiliser a des fins commercial sans une autorisation écrite de ma part.

Mammouth du PHP | 568 Messages

05 sept. 2013, 12:21

Salut, en fait je pense que c'est l'inverse Yosh, il faut augmenter le contenu de 2 pour que 3 glisse sous 1 et que 4 prenne sa place sous 2...
Tu peux aussi imposer une hauteur fix a tout les item et ca devrait aller...
si non, tu crée 2 colonnes, gauche et droite et dans la gauche, tu met 1, 3, 5 et dans la droite tu met 2, 4, 6...
Non, c'était simplement pour qu'il se rende compte du comportement "normal" de la propriéte float.

Mammouth du PHP | 790 Messages

05 sept. 2013, 18:06

Autant pour moi !!!
Les fautes de grammaire et d'orthographe contenu dans mes postes sont sous copyright, vous pouvez les utiliser pour un usage personnelle mais vous ne devrez en aucun cas les utiliser a des fins commercial sans une autorisation écrite de ma part.

Mammouth du PHP | 725 Messages

06 sept. 2013, 00:32

j'ajoute que je recupere le contenu depuis une base de donnee :(