Come posso creare un float in alto con i CSS?

Question

So che i CSS supportano solo i valori left e right per la proprietà float, ma esiste una tecnica per implementare un top mobile? Proverò a spiegare. Ho il seguente codice:

<div style="float:left"> 
<div style="float:left"> 
<div style="float:left"> 
.... 

Con questo codice ogni div è flottato a sinistra fino a quando viene raggiunto il limite destro della pagina. Voglio fare la stessa cosa ma verticalmente, in modo che ogni div sia posizionato nella parte inferiore della precedente e quindi, quando viene raggiunto il limite inferiore della pagina, viene creata una nuova colonna. C'è un modo per farlo usando solo i CSS (e magari modificando il codice HTML)?

Answer 1

L'unico modo per farlo solo con i CSS è usare CSS 3 che non funzionerà su tutti i browser (solo l'ultima generazione come FF 3.5, Opera, Safari, Chrome).

Infatti con i CSS 3 c'è questa proprietà impressionante: column-count che è possibile utilizzare in questo modo:

#myContent{ 
    column-count: 2; 
    column-gap: 20px; 
    height: 350px; 
} 

Se #myContent è avvolgente gli altri div.

Maggiori informazioni qui: http://www.quirksmode.org/css/multicolumn.html

Come si può leggere lì, ci sono serie limitazioni nell'utilizzo di questo. Nell'esempio sopra riportato, si sommerà solo una colonna se il contenuto fuoriesce. in mozilla è possibile utilizzare la proprietà column-width che consente di dividere il contenuto in tutte le colonne necessarie.

Altrimenti dovrai distribuire il contenuto tra diversi div in Javascript o nel back-end.

Answer 2

Non c'è float:top, solo float:left e float:right

Se si desidera visualizzare div uno sotto l'altro si dovrebbe fare:

<div style="float:left;clear:both"></div> 
<div style="float:left;clear:both"></div> 

Answer 3

Penso che il modo migliore per realizzare ciò che sei parlare è di avere una serie di div che saranno le tue colonne e popolare quelle nel modo in cui hai descritto. Quindi riempire questi div verticalmente con il contenuto di cui stai parlando.

Answer 4

Potreste essere in grado di fare qualcosa con pari livello selettori ad es .:

div + div + div + div{ 
float: left 
} 

Non provato, ma questo potrebbe galleggiare il 4 ° div lasciati forse fare quello che vuoi. Ancora non completamente supportato.

Answer 5

<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 

block {width:300px;} 
blockLeft {float:left;} 
blockRight {float:right;} 

Ma se il numero di elementi div non è fisso o non si sa quanto potrebbe essere, è comunque necessario JS. utilizzare jQuery , :odd

Answer 6

Hugogi Raudel ha escogitato un modo interessante per ottenere ciò tramite CSS.supponiamo ecco il nostro HTML markup:

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
</ul> 

è possibile ottenere una colonna di 3 righe utilizzando questo codice CSS:

li:nth-child(3n+2){ 
    margin: 120px 0 0 -110px; 
} 

li:nth-child(3n+3) { 
    margin: 230px 0 0 -110px; 
} 

Ed ecco il risultato finale:

Quello che stiamo facendo qui viene aggiunto un margine appropriato per ogni articolo nella riga. Questa limitazione di approccio è che devi determinare il conteggio delle righe della colonna. non sarà dinamico Sono sicuro che abbia casi d'uso quindi ho incluso questa soluzione qui.

• Ecco una demo live: http://codepen.io/HugoGiraudel/pen/DoAIB
• Si può leggere di più su questo in di Hugo blog post

Answer 7

Ho provato questo solo per divertimento - perché anch'io vorrei una soluzione.

violino: http://jsfiddle.net/4V4cD/1/

html:

<div id="container"> 
<div class="object"><div class="content">one</div></div> 
<div class="object"><div class="content">two</div></div> 
<div class="object"><div class="content">three</div></div> 
<div class="object"><div class="content">four</div></div> 
<div class="object tall"><div class="content">five</div></div> 
<div class="object"><div class="content">six</div></div> 
<div class="object"><div class="content">seven</div></div> 
<div class="object"><div class="content">eight</div></div> 
</div> 

css:

#container { 
width:300px; height:300px; border:1px solid blue; 
transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-moz-transform:rotate(90deg); /* Firefox */ 
-webkit-transform:rotate(90deg); /* Safari and Chrome */ 
-o-transform:rotate(90deg); /* Opera */ 
} 
.object { 
float:left; 
width:96px; 
height:96px; 
margin:1px; 
border:1px solid red; 
position:relative; 
} 
.tall { 
width:196px; 
} 

.content { 
padding:0; 
margin:0; 
position:absolute; 
bottom:0; 
left:0; 
text-align:left; 
border:1px solid green; 
-webkit-transform-origin: 0 0; 
transform:rotate(-70deg); 
-ms-transform:rotate(-90deg); /* IE 9 */ 
-moz-transform:rotate(-90deg); /* Firefox */ 
-webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
-o-transform:rotate(-90deg); /* Opera */ 
} 

I Potete vedere questo lavorerà con alti/div più ampi. Basta pensare di lato. Immagino che il posizionamento diventerà un problema. l'origine della trasformazione dovrebbe aiutare alcuni con essa.

Answer 8

Ho appena fatto con JQuery.

Ho eseguito il test in Firefox e IE10.

Nel mio problema gli articoli hanno altezze diverse.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .item { 
      border: 1px solid #FF0; 
      width: 100px; 
      position: relative; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 
    <script> 
     function itemClicked(e) { 
      if (navigator.appName == 'Microsoft Internet Explorer') 
       e.removeNode(); 
      else 
       e.remove(); 
      reposition(); 
     } 

     function reposition() { 
      var px = 0; 
      var py = 0; 
      var margeY = 0; 
      var limitContainer = $('#divContainer').innerHeight(); 
      var voltaY=false; 

      $('#divContainer .item').each(function(key, value){ 
       var c = $(value); 

       if ((py+c.outerHeight()) > limitContainer) { 
        px+=100; 
        margeY-=py; 
        py=0; 
        voltaY=true; 
       } 

       c.animate({ 
        left:px+'px', 
        top:margeY+'px' 
       }); 

       voltaY=false; 
       py+=c.outerHeight(); 
      }); 
     } 

     function addItem() { 
      $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>'); 
      reposition(); 
     } 

    </script> 
    <div id="divMarge" style="height: 100px;"></div> 
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;"> 
     <!--div class="item"></div--> 
    </div> 
    <div style="border: 1px solid #00F;"> 
     <input type="button" value="Add Item" onclick="addItem();" /> 
    </div> 
</body> 
</html> 

Answer 9

Per raggiungere questo obiettivo utilizzando CSS3, non sarà così difficile finché capisco correttamente. Diciamo che il DIV HTML somiglia a questo:

<div class="rightDIV"> 
    <p>Some content</p> 
<div> 
<!-- --> 
<div class="leftDIV"> 
    <p>Some content</p> 
</div> 

E il CSS sarebbe il seguente. Quello che farà il seguente CSS è rendere il tuo DIV eseguito a sinistra, che lo "incollerà" a sinistra dell'elemento DIV principale. Quindi, usi "top: 0" e lo "incollerà" nella parte superiore della finestra del browser.

#rightDIV { 
     float: left 
     top: 0 
    } 
    #leftDIV { 
     float: right; 
     top: 0 
    } 

Answer 10

Semplicemente utilizzare vertical-align:

.className { 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 11

Ecco una soluzione che funziona (quasi perfette) in FF, Opera, Chrome:

<style> 
    html {height:100%} 
    p {page-break-inside:avoid;text-align:center; 
     width:128px;display:inline-block; 
     padding:2px;margin:2px;border:1px solid red; border-radius: 8px;} 
    a {display:block;text-decoration:none} 
    b {display:block;color:red} 
    body { 
     margin:0px;padding:1%; 
     height:97%; /* less than 98 b/c scroolbar */ 
     -webkit-column-width:138px; 
     -moz-column-width:138px; 
     column-width:138px; 
    } 
    </style> 

    <body> 
    <p><b>title 1</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    </p> 

    <p><b>title 2</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    <a>link 5</a> 
    </p> 

    </body> 

Il trucco è "page-break- all'interno: evitare "su P e larghezza colonna su BODY. Viene fornito con il conteggio delle colonne dinamico. Il testo in A può essere multilinea e i blocchi possono avere altezze diverse.

Forse qualcuno ha qualcosa per Edge e IE

Answer 12

Il trucco che ha funzionato per me è stato quello di cambiare la scrittura-mode per la durata del div-allineamento.

.outer{ 
 
    /* Limit height of outer div so there has to be a line-break*/ 
 
    height:100px; 
 
    
 
    /* Tell the browser we are writing chinese. This makes everything that is text 
 
    top-bottom then left to right. */ 
 
    writing-mode:vertical-lr; 
 

 
} 
 

 
.outer > div{ 
 
    /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
 
    */ 
 
    float:left; 
 
    width:40px; 
 
    
 
    /* Switch back to normal writing mode. If you leave this out, everything inside the 
 
    div will also be top-bottom. */ 
 
    writing-mode:horizontal-tb; 
 

 
}

<div class="outer"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
</div>

Answer 13

Questo funziona, si applicano in ul:

display:flex; 
flex-direction:column; 
flex-wrap:wrap;