Come posizionare tre div in html orizzontalmente?

Sto creando un sito Web di esempio con tre divisioni orizzontali. Voglio che il div più a sinistra sia del 25% di larghezza, quello di mezzo sia del 50% di larghezza e a destra di essere del 25% di larghezza in modo che le divisioni riempiano tutto lo spazio del 100% in orizzontale.

  Website Title  
Left Side Menu
Random Content
Right Side Menu

View post on imgur.com

Quando eseguo questo codice, i div appaiono uno sopra l’altro. Voglio che appaiano uno accanto all’altro!

Come posso fare questo?

    Mi asterrò dall’usare i float per questo genere di cose; Preferirei usare inline-block .

    Alcuni altri punti da considerare:

    • Gli stili incorporati sono dannosi per la manutenibilità
    • Non dovresti avere spazi nei nomi dei selettori
    • Hai perso alcuni importanti tag HTML, come e
    • Non hai incluso un doctype

    Ecco un modo migliore per formattare il tuo documento:

        Website Title    
    Left Side Menu
    Random Content

    Ecco un jsFiddle per buona misura.

    So che questa è una domanda molto vecchia. Basta postare questo qui mentre risolvo questo problema usando FlexBox . Ecco la soluzione

     #container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; } 
     
    Left Side Menu
    Random Content
    Right Side Menu

    Puoi usare elementi fluttuanti in questo modo:

     
    Left Side Menu
    Random Content
    Right Side Menu

    Nota l’ overflow: nascosto; sul contenitore genitore, questo serve a far crescere il genitore con le stesse dimensioni degli elementi figli (altrimenti avrà un’altezza di 0).

    Il modo più semplice
    Vedo che la domanda è stata risolta, sto dando questa risposta a coloro che stanno avendo questa domanda in futuro


    Non è una buona pratica codificare i css in linea, e anche l’ ID per tutti i div interni, cerca sempre di usare la class per lo styling. Usare il css in linea è una pratica molto brutta se stai cercando di essere un web designer professionista.

    qui nella tua domanda ho dato una class wrapper per il genitore div e tutte le div interne div sono child div in css puoi chiamare inner div usando il selettore nth-child .

    Voglio indicare alcune cose qui

    1 – Non usare css in linea (è una pratica molto ctriggers)

    2 – Prova ad usare le classi invece degli id ​​perché se tu fornisci un id puoi usarlo solo una volta, ma se usi una class puoi usarla molte volte e puoi anche usarne uno stile usando quella class in modo da scrivere meno codice.


    collegamento codepen per la mia risposta

    https://codepen.io/feizel/pen/JELGyB


      .wrapper{width:100%;} .box{float:left; height:100px;} .box:nth-child(1){ width:25%; background-color:red; } .box:nth-child(2){ width:50%; background-color:green; } .box:nth-child(3){ width:25%; background-color:yellow; } 
     
    Left Side Menu
    Random Content
    Right Side Menu

    Aggiungi a

     float: left; 

    allo stile dei 3 elementi e assicurarsi che il contenitore genitore abbia

     overflow: hidden; position: relative; 

    questo assicura che i galleggianti occupino lo spazio reale.

       Website Title    
    Left Side Menu
    Random Content
    Right Side Menu

    Si noti inoltre che la larghezza: 100% e altezza: 100% devono essere rimossi dal contenitore, altrimenti il ​​3 ° blocco si avvolgerà in una seconda linea.

    Sbarazzarsi della position:relative; e sostituirlo con float:left; e float:right; .

    Esempio in jsfiddle: http://jsfiddle.net/d9fHP/1/

        Website Title  
    Left Side Menu
    Random Content
    Right Side Menu