Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Box Posizionati uno di fianco all'altro e centrati all'interno della pagina

    Salve
    Il mio problema e di rendere graficamente una soluzione simile a questa

    https://wireframe.cc/pRzmkQ

    Cioè ottenere quei tre box centrati nella pagina con una dimensione che si adatti in modo proporzionale alla pagina.
    Ho letto che una soluzione è quella di usare la proprietà flex-box e inserire i 3 div in question in un div container, ma come posso ottenere lo stesso risultato utilizzando i float?

  2. #2
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Perché non vuoi utilizzare i float? Perché dopo ti si sfasa il footer?? (presumo che venga a sovrapporsi ai 3 div)
    Se è cosi prova ad inserire un div vuoto sotto questi tre con la proprietà clear: both.
    Se proprio non vuoi usare il float metti a i tre div la proprietà display: inline-block
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  3. #3
    Non uso i float perchè non riesco a rendere fluidi i 3 box flottante cioè vorrei che avessero dimensioni uguali calcolate in base alla dimensione disponibile ed equamente spazianti e centrati.

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,948
    Bisogna fare un po' di conti, calcolatrice alla mano. Stabilite le dimensioni che devono avere i tre box, il restante spazio può essere attribuito ai margini (con aggiustamenti quando si ottengono troppi valori decimali).
    Per esempio:

    codice:
    <style type="text/css">
    <!--
    
    #threeColumns {
        background-color: yellow;
        overflow:hidden;
    }
    #first, #second, #third{
        background-color: green;
        float:left;
        margin:0 4.17%;
        height:200px;
        width:25%;
    }
    #second{
        margin:0 4.16%;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="threeColumns">
     <div id="first">colonna1</div>
     <div id="second">colonna2</div>
     <div id="third">colonna3</div>
    </div>
    </body>
    </html>

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.