Layout float dinamico con CSS

Question

Lasciami provare e spiegare cosa voglio raggiungere. Voglio scatole X con una larghezza specifica (250 px) impostata ma altezza dinamica da posizionare nel corpo. Ma voglio che siano il più compatto possibile, non c'è spazio vuoto inutile tra di loro.

Ora Se tutte le caselle avevano la stessa larghezza e altezza, sarebbe facile. Potrei ad esempio mettere semplicemente float:left; su di loro. Ma quando l'altezza delle caselle è dinamica, e tutte le caselle hanno un'altezza casuale, finisco con gli spazi tra le caselle.

Mi permetta di mostrare due esempi:

Questo è quello che voglio:

Questo è ciò che io alla fine con:

Questo è il mio CSS:

<style type="text/css"> 
<!-- 
body { 
    background:#CCCCCC; 
} 
.flowBox { 
    background:#FFFFFF; 
    margin:10px; 
    float:left; 
    padding:10px; 
    width:250px; 
    border:#999999 1px solid; 
} 
.clear { 
    clear:both; 
} 
--> 
</style> 

esempio HTML per una scatola:

<div class="flowBox"> 
    <h1>Header 0</h1> 
    Erat volutpat. Sed rutr... 
</div> 

Il codice sorgente completo:http://pastebin.com/UL1Nqyvm

C'è un modo per raggiungere questo obiettivo con i CSS? Grazie per qualsiasi aiuto o indicazioni!

Answer 1

Da quello che ho visto prima, ciò che desideri ottenere è difficilmente possibile se non impossibile solo con i CSS. Quello che vuoi, in sostanza, è un layout simile a Pinterest, puoi controllare il loro sito web come riferimento se non sei sicuro di cosa sto parlando.

Da qui, è possibile la ricerca di un po 'di più sul modo in cui il layout Pinterest è stato fatto e se ci sono eventuali alternative - CSS Frameworks, jQuery Plugin e così via.

Quello che ho trovato per voi da una breve ricerca di avere in mente quanto sopra:

• Wookmark jQuery Plugin
• Masonry jQuery Plugin

Inoltre, ecco un breve spiegazione da Evan Sharp chi ha scritto il codice per il layout Pinterest:

Ho scritto lo script Pinterest. Ecco la base di come funziona:

Preventivamente: Assolutamente posizionare i contenitori perno Determinare colonna larghezza determinare il margine tra le colonne (grondaia)

Setup un array: Ottenere la larghezza del contenitore principale; calcola il numero di colonne che si adattano Creare un array vuoto, con una lunghezza pari a il numero di colonne. Utilizza questa matrice per memorizzare l'altezza di ogni colonna come mentre crei il layout, ad es.l'altezza della colonna 1 viene memorizzato come array [0]

loop attraverso ogni pin: mettere ogni perno sulla colonna corti al momento in cui viene aggiunto "sinistra" === colonna # (array index) volte la larghezza colonna + margine "top" === il valore nella matrice (altezza) per la colonna più breve in quel momento Infine, aggiungere l'altezza del perno di l'altezza della colonna (valore array)

Il risultato è leggero. In Chrome, layout di una pagina intera di 50 + perni prende < 10ms>

Si può andare da qui sia ricercando l'argomento ancora di più con il leggero guida ho fornito o se siete in codifica, potresti persino realizzare la tua implementazione della spiegazione di cui sopra.

Tuttavia, sarebbe molto più semplice usare i plugin jQuery, ma se sono adatti al tuo caso, è solo per te che devi decidere.

Answer 2

ottima domanda! Ho provato questo più volte con successo diverso, e non è possibile con solo css. L'unico suggerimento che posso darti è: è un problema di imballaggio e ci sono script jQuery per questo!

Answer 3

Non hai raggiungere questo obiettivo con CSS puro è necessario utilizzare questo JS http://masonry.desandro.com/

Answer 4

Non sono sicuro, ma penso che si può ottenere qualcosa di simile con il "FlexBox-layout" http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

Il problema è che è qualcosa di completamente nuovo e potrebbe essere necessario un supporto più ampio.

Answer 5

Almeno da quello che so, questo è impossibile. Il posizionamento CSS funziona da sinistra a destra e poi dall'alto in basso. Quindi puoi fluttuare a sinistra (o a destra) ma non in alto.

Quindi probabilmente più semplice è un po 'di scripting, e non dovrebbe essere complicato:

1. La vostra struttura dovrebbe consiste di blocchi div, ciascuno 250px di larghezza, e come molti come si adatta. Vorrei possibilmente creare poi nel gestore window.resize:

   $(window).resize(function() 
   { 
       // ... 
   } 
   

2. tuo HTML originale può mettere tutti i blocchi nel primo blocco verticale. Quindi nello stesso gestore di ridimensionamento puoi prendere i blocchi e spostarli dal primo al successivo.Questo è essenzialmente un due-liner, scorrendo gli elementi, e fare qualcosa di simile a questo:

   $("#FlowBox" + i) 
       .appendTo("#VerticalBlock" + (i % number_of_vertical_blocks)); 
   

CSS è poi qualcosa di simile:

.verticalBlock { 
    background:#CCCCCC; 
    margin:10px; 
    float:left; 
    padding:10px; 
    width:250px; 
    border:#999999 1px solid; 
} 
.flowBox { 
    background:#CCCCCC; 
    padding-top:10px; 
} 

Answer 6

Hai provato http://masonry.desandro.com/ ?? Si basa su jQuery

Answer 7

Prova questo e può aiutare a

HTML

<div class="left"> 
    <div class="flowBox"> 
      <h1>Header 0</h1> 
      erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
    <div class="flowBox"> 
     <h1>Header 4</h1> 
     am, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
</div> 
<div class="left"> 
    <div class="flowBox"> 
      <h1>Header 1</h1> 
      es vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
    <div class="flowBox"> 
     <h1>Header 5</h1> 
     s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
</div> 
<div class="left"> 
    <div class="flowBox"> 
      <h1>Header 2</h1> 
      illa at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
    <div class="flowBox"> 
     <h1>Header 6</h1> 
     eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
</div> 
<div class="left"> 
    <div class="flowBox"> 
      <h1>Header 3</h1> 
      ngilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
    <div class="flowBox"> 
     <h1>Header 7</h1> 
     dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
    </div> 
</div> 
<div class="clear"></div> 

CSS

body { 
     background:#CCCCCC; 
} 
.flowBox { 
     background:#FFFFFF; 
     margin-bottom:10px;  
     padding:10px; 
     width:250px; 
     border:#999999 1px solid; 
} 
.left { float:left; margin:10px;} 
.clear { 
     clear:both; 
} 

E così via ... In questo voi può farlo ma non è la strada giusta. O devi usare Javascript per questo. In precedenza altri utenti ti hanno già fornito il link

Answer 8

Si può fare questo con CSS3:

body { 
-moz-column-count: 4; 
-moz-column-gap: 20px; 
-webkit-column-count: 4; 
-webkit-column-gap: 20px; 
column-count: 4; 
column-gap: 20px; 
height: 800px; //breaks the column into new ones 
} 

Ma il suo unico attualmente supportato da Firefox, Safari e Chrome (versioni più recenti).

E non lo metterà nell'ordine in cui l'hai fatto, metterà 0-> 1-> 2-> 3 nella prima colonna piuttosto che attraverso.

Utilizzando i selettori CSS, è possibile modificare i div di 2a e 3a riga, ed è possibile impostarli in una nuova posizione, ma non è possibile dire quale fosse la posizione del div precedente, quindi hai vinto ' essere in grado di spostarlo nel posto giusto a meno che non si usi javascript.

Considerate questo esempio:

body>div.flowBox:nth-of-type(5n) { 
    /* alter position of every 5th flowBox */ 
    position: relative; 
    top: -200px; /* how can you tell how much? */ 
} 
body>div.flowBox:nth-of-type(6n) { 
    /* alter position of every 6th flowBox */ 
} 
/* and so on */ 
... 

È possibile impostare le posizioni, ma non si può dire dove impostare, perché non c'è modo di ottenere un altro elementi di proprietà. Quindi per quello dovrai usare javascript.

Answer 9

body { 
      background:#CCCCCC; 
    } 

.outer-div{ 
      width:800px; 
     } 

tua innver div

.flowBox { 
      background:#FFFFFF; 
      margin-bottom:10px;  
      padding:10px; 
      width:250px; 
      border:#999999 1px solid; 
      } 


.left { float:left; margin:10px;} 
.clear { clear:both;} 

codice html:

<div class="outer-div"> 
<div class="left flowBox"> 
    <h1>Header 1</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
<div class="left flowBox"> 
    <h1>Header 2</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 3</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 4</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 5</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 6</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 7</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
    <div class="left flowBox"> 
    <h1>Header 8</h1> 
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae. 
</div> 
</div> 

provare questo, vi aiuterà!