Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2023
    Messaggi
    3

    Allineamento sulla stessa riga

    Salve,
    premetto che sono un principiante.
    Vorrei scrivere sulla stessa riga tre testi, uno allineato a sinistra, uno al centro e uno a destra della pagina, ho utilizzato la seguente scrittura:

    <div style="float: left; text-align: left;">testo 1</div>
    <div style="float: center; text-align: center;">testo 2</div>
    <div style="float: right; text-align: right;">testo 3</div>

    Solo che quello al centro risulto troppo a destra è quello di destra va a capo.

    Potete aiutarmi?

  2. #2
    Togli quel float:center ed il div centrale richiamalo per ultimo
    Io nella vita ho visto cose che voi astemi neanche potete immaginare.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2023
    Messaggi
    3
    Quote Originariamente inviata da SoloWiFi Visualizza il messaggio
    Togli quel float:center ed il div centrale richiamalo per ultimo
    Grazie mille, risolto

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,538
    ricorda anche che float:center non esiste

  5. #5
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    291
    Recentemente ho letto un articolo molto interessante dove praticamente viene sconsigliato
    l'utilizzo di float per la gestione del layout, sono invece consigliate tecnologie più
    recenti come flexbox o grid.
    Float anche se non deprecato rimane ancora utilizzato come hack per la gestione
    ad'esempio di un testo su immagine.
    Per evitare di gestire anche un clearFix che vada a cancellare il comportamento del float è
    consegliato utilizzare nel contenitore del float display: flow-root

    Nell'esempio qui sotto, puoi vedere come lo stesso layout lavora diversamente a seconda della
    tecnologia utilizzata, in questo caso float e flexbox.

    codice:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #flex-container {
                display: flex;
                margin-top: 20px;
            }
    
            .flex-item {
                border: 1px solid black;
                flex: 1;
                padding: 10px;
            }
    
            #float-container {
                display: flow-root;
            }
    
            .float-item {
                box-sizing: border-box;
                border: 1px solid black;
                width: 33.33%;
                float: left;
                padding: 10px;
            }
    
            :is(.flex-item, .float-item):nth-child(1) {
                background-color: green;
            }
    
            :is(.flex-item, .float-item):nth-child(2) {
                background-color: whitesmoke;
            }
    
            :is(.flex-item, .float-item):nth-child(3) {
                background-color: red;
            }
    
            img {
                width: 100px;
                height: 50px;
                margin-right: 10px;
                float: left;
                border: 1px solid black;
            }
    
        </style>
    
    
    </head>
    
    <body>
    
        <div id="float-container">
            <div class="float-item">
                <img src="#" alt="img1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat consequuntur non. Expedita
                    consectetur repellendus quibusdam accusantium, voluptatibus, doloribus illum ab porro excepturi itaque
                    reiciendis quia, cumque officiis corporis aspernatur!
                </p>
            </div>
            <div class="float-item">testo 2</div>
            <div class="float-item">testo 3</div>
        </div>
    
        <div id="flex-container">
            <div class="flex-item">
                <img src="#" alt="img1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat consequuntur non. Expedita
                    consectetur repellendus quibusdam accusantium, voluptatibus, doloribus illum ab porro excepturi itaque
                    reiciendis quia, cumque officiis corporis aspernatur!
                </p>
            </div>
            <div class="flex-item">testo 2</div>
            <div class="flex-item">testo 3</div>
        </div>
    
    </body>
    
    </html>

  6. #6
    Utente di HTML.it
    Registrato dal
    Jan 2023
    Messaggi
    3
    ok, grazie

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 © 2023 vBulletin Solutions, Inc. All rights reserved.