[Résolu] Aligner verticalement une div à celle du dessus

Salut à tous !

Je viens de m'inscrire ici, parce que je suis pas tellement un cador en CSS, et que vous, visiblement, si ^^. Je coince sur un petit souci, qui doit pas être très difficile à régler, mais impossible de trouver une solution.

En gros, j'ai plusieurs "containers" comme ça :

        <div class="container">
        </div>
        <div class="container">
            <div class="poster">
                <img <?php fctaffichimage('img/avatars/' . $_SESSION['avatar'], 40, 40); ?> alt="avatar" />
                <span><b>RevengeOfShadow</b> a partagé :</span>
                <div class="info">
                    <img src="img/info.png" class="infopic" title="Posté le dimanche 16 juin 2013" />
                </div>
            </div>
            <div class="content txt">
                Salut à tous, c'est un exemple de texte.<br />Petit retour à la ligne, mais fuck le Lorem Ipsum pour une fois. Du coup, j'écris nawak.
            </div>
        </div>
        <div class="container">
            <div class="poster">
                <img <?php fctaffichimage('img/avatars/' . $_SESSION['avatar'], 40, 40); ?> alt="avatar" />
                <span><b>RevengeOfShadow</b> a partagé :</span>
                <div class="info">
                    <img src="img/info.png" class="infopic" title="Posté le dimanche 16 juin 2013" />
                </div>
            </div>
            <div class="content yt">
                Exemple de vidéo YouTube.
            </div>
            <div class="videospace">
                <iframe src="http://www.youtube.com/embed/Rr12u1tk_rM" width="100%" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <div class="container">
        </div>
        <div class="container">
        </div>
        <div class="container">
        </div>
        

Et voici le design qui leur est associé :

.container {
    width:30%;
    margin:1%;
    background:#EDEDED;
    border:1px solid #D9D9D9;
    border-bottom-width:2px;
    border-radius:3px;
    min-height:200px;
    display:inline-block;
    vertical-align:text-top;
}

.container .poster {
    background:#E4E5E5;
    height:55px;
}

.container .poster img {
    margin-top:7.5px;
    margin-left:7.5px;
    transition-property: all;
    transition-duration: .1s;
    transition-timing-function: linear;
}

.container .poster .info {
    float:right;
    margin-right:7.5px;
    position:relative;
}

.container .poster .info img:hover {
    opacity:0.5;
}

.container .poster .info span {
    left:23px;
    top:3px;
    position: absolute;
    visibility: hidden;
    opacity:0;
    width: 180px;
    height: 20px;
    line-height: 20px;
    padding: 0px;
    font-size: 12px;
    text-align: center;
    color: rgb(196, 196, 196);
    background: rgb(46, 46, 46);
    border: 1px solid rgb(115, 115, 115);
    border-radius: 4px;
    transition-property: opacity;
    transition-duration: .1s;
    transition-timing-function: ease-in;
}

.container .poster .info span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #2E2E2E transparent transparent;
    top: 6px;
    left: -10px;
}

.container .content {
    padding-left:60px;
    padding-top:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:5px;
    color:#575757;
}

.container .txt {
    background:url('../img/sh_text.png') no-repeat;
    min-height:60px;
}

.container .videospace {
    padding:10px;
    max-width:100%;
}

.container .yt {
    background:url('../img/sh_youtube.png') no-repeat;
    min-height:60px;
    border-bottom:1px solid #B6B6B6;
}

.container .poster .info:hover span {
    opacity:1;
    visibility: visible;
}

.container .poster span {
    margin-left:5px;
    height:51px;
    vertical-align:middle;
    display:inline-block;
    color:#4D4D4D;
}

En gros, j'aimerais que ces containers (3 par ligne) touchent ceux qui sont au dessus d'eux. Actuellement, ils s'alignent au container de leur ligne le plus bas. Pour simplifier, je voudrais le même fonctionnement que sur Google+.
J'aimerais éviter de recourir au JS le plus possible, étant donné que je ne le maîtrise pas du tout.

Merci à vous !
Modifié par RevengeOfShadow (18 Jun 2013 - 13:22)

salut,
je n'ai rien compris mais tu dois chercher un truc du genre "vertical-align:top" car "vertical-alig:text-top" n'existe pas.
Modifié par Zelalsan (16 Jun 2013 - 20:21)

text-top existe : http://www.w3schools.com/CSSref/pr_pos_vertical-align.asp.
Ceci dit, top me donne exactement le même résultat. Pour un exemple, va sur Google+, tu vois, les messages sont tous les uns en dessous des autres (ils sont pas alignés sur une ligne). Je voudrais le même comportement.

a écrit :
text-top existe

Exact ! Dingue je viens de m'en rappeler, comme quoi... Et il existe une subtile différence entre les deux.
Par contre je ne vois toujours pas ce que tu veux. C'est peut être moi qui n'arrive plus à cogiter.

Je vois pas vraiment comment te l'expliquer, donc je t'ai fait un schéma (sur paint ) :

Actuellement j'ai ça :


Comme tu peux le voir, les div (les carrés noirs) de la deuxième ligne s'alignent sur la ligne rouge (la div de la première ligne la plus haute contrôle la hauteur de toutes les divs, donc).

Alors que moi, je voudrais ça :


Comme tu peux le voir, chaque div s'aligne sur celle qui est au dessus. Bien sûr, il peut y avoir plus de lignes, donc il faut que les div s'alignent bien proprement peu importe le nombre de lignes.

Merci de te pencher sur mon problème .

Bonjour,

jQuery Masonry (le plus connu) porte bien son nom
D'autres ici , dont une solution en CSS3 (si le besoin de rétro-compatibilité n'est pas obligatoire )

Pourquoi ne pas travailler avec 3 div flottantes gauches...
qui contiennent chacune des div l'une sous l'autre ?

J'essaie de garder un minimum de rétro-compatibilité, même si c'est pas dans mon cahier des charges. Je vais d'abord me tourner vers la solution en jQuery, et je vous tiens au courant.

Merci !

EDIT : J'ai réussi à obtenir un résultat potable, mais j'ai du mal à comprendre l'utilisation du "columnWidth" de jQuery Masonry.

Au niveau des solutions CSS, j'ai essayé, mais ça a été un vrai carnage. Je pensais pas que ça serait aussi compliqué...

Sinon, pour ce qui des div qui contiennent le truc verticalement, c'est tout simplement pour que le résultat soit plus facile à tirer avec des requêtes MySQL (Pour faire le tri des dates, afin de garder les contenus plus récents en hauts).

EDIT 2 : En fait j'ai réussi à faire plus simple en fixant un width en pixels sur mes containers, et à virer "columnWidth". Là c'est pas mal, donc je passe résolu. Merci !
Modifié par RevengeOfShadow (18 Jun 2013 - 13:22)