div stacking CSS con altezza variabile su due colonne

Quindi sto lavorando la pagina del profilo di un utente sul mio sito web. E sto avendo un piccolo problema con il CSS.div stacking CSS con altezza variabile su due colonne

Il mio problema è il seguente: Ho quattro scatole div con larghezza fissa ma con altezze variabili e vorrei che si impilassero una sopra l'altra.

L'immagine qui sotto è uno screenshot del mio problema, il div con il titolo "Ultimi video" deve essere incollato a quello con il titolo "informazioni di base". Come "informazioni di contatto" e "Foto più recenti" sono.

My problem

mio html simile a questa:

<div style="margin-left:-10px"> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for basic info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for contact info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest photos 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest videos 
    </div> 
</div>

La classe CSS per il box informazioni appare così:

.infoBox { 
    width: 100%; 
    margin: -1px; 
    background-color:#37312d; 
    padding:5px; 
    border:#5b504a solid 1px; 
    margin-bottom:9px; 
    float:left; 
}

Come posso fare per fare questo lavoro?

fonte

2012-09-10 Joris Blanc

Le stai facendo fluttuare tutte a sinistra, immagino che fluttuare due a destra e due a sinistra otterrebbero quello che stai cercando o manco qualcosa? –

Mi sento come se qualcosa fosse qui. Ho fatto [un violino] (http://jsfiddle.net/7pm67/1/) in cui ho reso il contenitore '760px' largo, e tutto si allinea. C'è qualcosa di più nel CSS qui? Forse c'è un problema con il contenuto stesso? – Eric

questa domanda potrebbe essere utile http://stackoverflow.com/questions/10302056/workign-with-floating-li-elements-in-footer/10303004#10303004 – Paradise

Breve nesting your divs in columns:

<div class="left-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div> 
<div class="right-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div>

si potrebbe provare jQuery Masonry. Here's a fiddle dimostrando il suo uso.

fonte

2012-09-10 18:53:03 crowjonah

Great link, e penso che questo darà più fluidamente a Joris quello che vuole. +1 – KRyan

Ho intenzione di esaminare questo anche se avrei preferito una soluzione che non includesse javascript. Grazie –

In questa pagina ci sono molte soluzioni CSS! [Ecco un altro violino] (http://jsfiddle.net/crowjonah/pWvsh/) usando div nidificati come colonne. – crowjonah

Si può provare con questo codice

#bottom{ 
    width: ???px; 
    height: ???px; 
    background-color: black; 
} 
#top{ 
    width:???px; 
    height:???px; 
    background-color:red; 
    z-index: 999; 
} 


<div id="bottom"> 
    <div>......</div> 
    <div id="top">......</div> 
</div>

fonte

2012-09-10 18:56:07

Si può mettere le caselle in colonne like so. Questo è un sistema di griglia molto semplice, ma mostra l'idea di base: stai impilando le tue scatole all'interno di div wrapper che formano colonne.

Se ripeterai questo schema su tutto il tuo sito, potresti voler utilizzare un sistema di griglia più formale. Si possono trovare molti esempi semplicemente cercando "css grid system".

fonte

2012-09-10 18:57:09 tuff

vi consiglio di dividere il contenuto in due colonne:

HTML:

<div style="margin-left:-10px"> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for basic info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest videos 
     </div> 
    </div> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for contact info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest photos 
     </div> 
    </div> 
</div>

e il componente aggiuntivo CSS:

.column{float:left; width:50%;}

UPDATE: le scatole all'interno delle colonne don' Ho bisogno di essere float se si utilizza questa soluzione

fonte

2012-09-10 18:59:47

L'unica modifica che farei in questo modo è di rendere 'column' una classe e non un ID, dal momento che intendi condividerla tra più elementi. – mclark1129

grazie @Mike, ho appena corretto che –

Questo potrebbe funzionare, vado a provarlo e vederlo se è una soluzione pratica. :) –

La soluzione migliore che ho trovato per questo io ssue è quello di taggare ogni post con la classe .odd e .even o .left e .right, poi semplicemente lascia i messaggi dispari/a sinistra e sposta i messaggi pari/destra. Si noti che questo funziona solo visivamente se le larghezze dei post si sommano alla larghezza del loro contenitore. Quindi, per fare in modo che funzioni su una varietà di dimensioni dello schermo, aggiungi semplicemente una query @media per modificare il float sui post pari/destra da lasciare su schermi più piccoli della larghezza del contenitore a doppia colonna.

fonte

2014-03-19 00:36:37 hyphnKnight

Sembra che tu abbia del codice che potresti condividere? –

div stacking CSS con altezza variabile su due colonne

risposta

Problemi correlati