Come posso fare un galleggiante in alto con i CSS?

So che CSS supporta solo a sinistra e a destra i valori per la proprietà float, ma c’è una tecnica per implementare un flottante superiore? Cercherò di spiegare. Ho il seguente codice:

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

Con questo codice ogni div è spostata a sinistra fino a quando il margine destro della pagina non è raggiungibile. Io voglio fare la stessa cosa, ma in verticale, in modo che ogni div è posto in fondo di quello precedente, e quindi, quando il limite inferiore della pagina è raggiunto, creare una nuova colonna. C’è un modo per fare questo usando solo i CSS (e magari modificare il codice HTML)?

  • Una buona e interessante domanda. Non importa quanto lontano io tratto la mia immaginazione, non riesco a vedere un modo per fare questo con puro HTML e CSS. Interessato a vedere se qualcosa viene in su.
  • Come ti stai creando il limite inferiore della pagina? Sono questi div andando ad essere all’interno di un altezza fissa contenitore?
  • Sì, il contenitore ha un’altezza fissa
  • Suona come si potrebbe uscire una libreria javascript.
InformationsquelleAutor mck89 | 2009-12-04



14 Replies
  1. 28

    L’unico modo per farlo con i CSS solo con l’utilizzo dei CSS 3, che non è andare a lavorare su tutti i browser (solo l’ultima generazione come FF 3.5, Opera, Safari, Chrome).

    Infatti con CSS 3, c’è questo fantastico proprietà : column-count che è possibile utilizzare in questo modo :

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

    Se #myContent è la vostra confezione di altri div.

    Più info qui : http://www.quirksmode.org/css/multicolumn.html

    Come si può leggere qui, ci sono gravi limitazioni nell’utilizzo di questo. Nell’esempio di cui sopra, sarà solo aggiungere una con l’altra colonna se il contenuto di overflow.
    in mozilla è possibile utilizzare la larghezza di colonna di proprietà che consente di suddividere il contenuto in tutte le colonne necessarie.

    Altrimenti dovrete distribuire il contenuto tra le diverse div in Javascript o nel back-end.

    • Grazie non sapevo che. Forse posso trovare da qualche parte un modo per implementare le proprietà del browser meno recenti.
    • mck89 -Da implementare in un vecchio browser è probabilmente avrebbero bisogno di javascript.
  2. 15

    Hugogi Raudel è venuto su con un modo interessante per ottenere questo risultato CSS. supponiamo che qui è 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 3, riga, colonna, utilizzando questo CSS codice:

    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:

    Come posso fare un galleggiante in alto con i CSS?

    Quello che stiamo facendo qui è l’aggiunta di un margine ragionevole per ogni elemento della riga. Questo approccio limitazione è che è necessario per determinare la colonna conteggio delle righe. non è intenzione di essere dinamico. Sono sicuro che ha i casi d’uso, così ho incluso questa soluzione qui.

  3. 7

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

    Se si desidera visualizzare il div sotto ogni altro si dovrebbe fare:

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

    Ho provato in questo modo solo per divertimento, perché vorrei anche io 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 */
    }

    Mi Si può vedere questo lavoro con il più alto/più ampia div. Basti pensare lateralmente. Immagino posizionamento diventerà un problema. transform-origin dovrebbe aiutare con esso.

  5. 2

    Penso che il modo migliore per ottenere ciò di cui stai parlando è di avere una serie di div che saranno le colonne e inserire quelli nel modo da te descritto. Quindi riempire i div in posizione verticale con il contenuto che si sta parlando.

  6. 2
    <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 div elementi non è fisso o non sapete quanto potrebbe essere, hai ancora bisogno di JS. utilizzare jQuery :even, :odd

  7. 2

    Faccio con JQuery.

    Ho provato su Firefox e IE10.

    Nel mio problema che gli articoli sono di 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>
  8. 2

    Per ottenere questo utilizzando CSS3, non sarà così difficile come io sono di comprensione correttamente. Diciamo che il codice HTML DIV assomiglia a questo:

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

    E CSS sarebbe seguita. Quello che i CSS fare è rendere il vostro DIV eseguire un float a sinistra, che si “attaccano” a sinistra dell’elemento DIV Padre. Quindi, è possibile utilizzare un “top: 0”, e si “attaccano” al superiore della finestra del browser.

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

    Qui è una soluzione che funziona (quasi perfetto) 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-inside:evitare la” P e la larghezza della colonna, sul CORPO. Esso viene fornito con dynamic numero di colonne. Testo in può essere multi-linea e blocchi possono avere altezze diverse.

    Forse qualcuno ha qualcosa per Edge e IE

  10. 1

    Il trucco che ha funzionato per me è stato il cambiamento della scrittura-modalità per la durata di un div-allineamento.

    CSS:

    .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;
    
    }

    HTML:

    <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>

  11. 1

    Questo funziona, si applicano in ul:

    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
  12. 0

    Si potrebbe essere in grado di fare qualcosa con i fratelli selettori ad esempio:

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

    Non provato, ma questo potrebbe galleggiante 4 ° div di sinistra forse fare quello che vuoi. Ancora non è completamente supportato.

    • Questo non è quello che stavo cercando, ma è molto interessante effetto 🙂
  13. 0

    So che questa domanda è vecchia. Ma chi cerca di fare oggi qui si va.

    CSS:

    div.floatablediv{
    	-webkit-column-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	column-break-inside: avoid;
    }
    div.floatcontainer{
      -webkit-column-count: 2;
    	-webkit-column-gap: 1px;
    	-webkit-column-fill: auto;
    	-moz-column-count: 2;
    	-moz-column-gap: 1px;
    	-moz-column-fill: auto;
    	column-count: 2;
    	column-gap: 1px;
    	column-fill: auto;
    }

    HTML:

    <div style="background-color: #ccc; width: 100px;" class="floatcontainer">
      <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
      </div>
        <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
      </div>
        <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
      </div>
        <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
      </div>
      <div style="clear:both;"></div>
    </div>

Lascia un commento