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 sia del 25% di larghezza in modo che le divisioni riempiano tutto lo spazio del 100% in orizzontale.Come posizionare tre div in html orizzontalmente?

<html> 
    <title> 
    Website Title 
    </title> 

    <div id="the whole thing" style="height:100%; width:100%" > 

     <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> 
      Left Side Menu 
     </div> 

     <div id="content" style="position: relative; width:50%; background-color:green;"> 
      Random Content 
     </div> 

     <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> 
      Right Side Menu 
     </div> 

    </div> 
</html>

http://imgur.com/j4cJu

Quando eseguo questo codice, i div appaiono gli uni sugli altri. Voglio che appaiano uno accanto all'altro!

Come posso fare questo?

fonte

2012-08-13 Akhil

Dare sinistra div lo stile "float: left" e il div giusto "galleggiante :destra". –

Rendili a sinistra, si impileranno uno dopo l'altro. Tuttavia, non sono sicuro che la% -width verrà comunque applicata, dovresti provarlo. – Terry

@ user1594853 Se una risposta ti ha aiutato, contrassegnala come accettata. –

È possibile utilizzare floating elements in questo modo:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;"> 
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div> 
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div> 
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div> 
</div>

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

fonte

2012-08-13 09:09:22

Mentre float è corretto, non consiglierei un "newb HTML" "per iniziare a usare CSS in linea. Modifica: ho notato che stava già usando CSS inline, tuttavia suggerirei una soluzione migliore. – powerbuoy

@powerbuoy è d'accordo, il CSS in linea NON è raccomandato. Ciò si farebbe da un file CSS incluso in cui gli stili sono associati tramite id (#leftThing {float: left;}), selector o nome classe. –

si aggiunge un

float: left;

allo stile dei 3 elementi e assicurarsi che il contenitore padre ha

overflow: hidden; position: relative;

questo rende sicuro che i carri occupano spazio reale.

<html> 
    <head> 
     <title>Website Title </title> 
    </head> 
    <body> 
     <div id="the-whole-thing" style="position: relative; overflow: hidden;"> 
      <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;"> 
       Left Side Menu 
      </div> 
      <div id="content" style="position: relative; width: 50%; background-color: green; float: left;"> 
       Random Content 
      </div> 
      <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;"> 
       Right Side Menu 
      </div> 
     </div> 
    </body> 
</html>

Inoltre si prega di notare che la larghezza: 100% e l'altezza: 100% deve essere rimosso dal contenitore, altrimenti il 3 ° blocco andrà a capo ad un 2 ° riga.

fonte

2012-08-13 09:12:28 NKCSS

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

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

 <html> 
<title> 
Website Title </title> 
<div id="the whole thing" style="float:left; height:100%; width:100%"> 
    <div id="leftThing" style="float:left; width:25%; background-color:blue;"> 
     Left Side Menu 
    </div> 
    <div id="content" style="float:left; width:50%; background-color:green;"> 
     Random Content 
    </div> 
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;"> 
     Right Side Menu 
    </div> 
</div> 
</html>

fonte

2012-08-13 09:12:47 MNilson

mi piacerebbe evitare di utilizzare carri per questo genere di cose; Preferirei usare inline-block.

qualche punto in più da considerare:

stili in linea sono un male per la manutenibilità
Non si dovrebbe avere spazi nei nomi di selezione
Ti sei perso alcuni importanti tag HTML, come <head> e <body>
Non hai incluso un doctype

Ecco un modo migliore per formattare il documento:

<!DOCTYPE html> 
<html> 
<head> 
<title>Website Title</title> 
<style type="text/css"> 
* {margin: 0; padding: 0;} 
#container {height: 100%; width:100%; font-size: 0;} 
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} 
#left {width: 25%; background: blue;} 
#middle {width: 50%; background: green;} 
#right {width: 25%; background: yellow;} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="left">Left Side Menu</div> 
    <div id="middle">Random Content</div> 
    <div id="right">Right Side Menu</div> 
</div> 
</body> 
</html>

Ecco un jsFiddle per buona misura.

fonte

2012-08-13 09:21:06

Bello che tu suggerisca di passare da CSS in linea. Vorrei anche sottolineare che "left", "middle" e "right" sono _really_ bad ID (o nomi di classi) in quanto sono direttamente correlati al loro layout piuttosto che al loro significato. Inoltre, non raccomanderei 'inline-block' per questo oltre' float'.Un elemento 'inline-block' è influenzato da' letter-spacing' e 'font-size' (etc) che li rende più difficili da allineare (una soluzione sta impostando' font-size: 0' su '# container' e quindi riportandolo alla normalità in '#container *'). – powerbuoy

Sì, è assolutamente vero. –

"Ti sei perso alcuni importanti tag HTML, come e " Tecnicamente nulla di sbagliato in questi giorni ...: https://html.spec.whatwg.org/multipage/syntax.html#optional-tags – roundar

So che questa è una domanda molto vecchia. Inserendo questo qui come ho risolto questo problema utilizzando 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; 
 
}

<div id="container"> 
 

 
    <div id="leftThing"> 
 
    Left Side Menu 
 
    </div> 
 

 
    <div id="content"> 
 
    Random Content 
 
    </div> 
 

 
    <div id="rightThing"> 
 
    Right Side Menu 
 
    </div> 
 

 
</div>

solo dovuto aggiungere display:flex al contenitore! Non sono richiesti galleggianti.

fonte

2016-10-24 03:07:22

Modo più semplice
posso vedere la domanda si risponde, sto dando questa risposta per coloro che sta avendo questa domanda in futuro

Non è consigliabile codificare i css in linea e anche ID per tutte le div interne, cerca sempre di usare classe per lo styling. Utilizzare il css in linea è una pessima pratica se stai cercando di essere un web designer professionista.

qui nella sua domanda mi hanno dato una classe wrapper per il div genitore e tutti i div all'interno del bambino sono div in CSS è possibile chiamare interne div utilizzando nth-child selettore.

ci tengo a precisare alcune cose qui

1 - Non usare CSS in linea (è molto cattiva pratica)

2 - Prova a utilizzare le classi invece di id, perché se si dà un id è possibile usalo solo una volta, ma se usi una classe puoi usarla molte volte e puoi anche usarne uno stile usando quella classe in modo da scrivere meno codice.

collegamento codepen 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; 
 
      } 
    
 
    <div class="wrapper"> 
 
     <div class="box"> 
 
     Left Side Menu 
 
     </div> 
 
     <div class="box"> 
 
     Random Content 
 
     </div> 
 
     <div class="box"> 
 
     Right Side Menu 
 
     </div> 
 
    </div>

fonte

2017-02-01 17:21:37

Come posizionare tre div in html orizzontalmente?

risposta

Problemi correlati