CSS, visualizzazione in linea e tre div

ho questo codice HTML:CSS, visualizzazione in linea e tre div

<body> 
    <div id="div0" style="display:inline; background-color:green; width:100%"> 
     <div id="div1" style="display:inline; background-color:aqua;width:33%">&nbsp;</div> 
     <div id="div2" style="display:inline; background-color:red;width:33%">&nbsp;</div> 
     <div id="div3" style="display:inline; background-color:yellow;width:33%">&nbsp;</div> 
    </div> 
</body>

voglio riempire la pagina con div1, div2 e div3 ma non riempiono l'intera larghezza .

Cosa sta succedendo?

fonte

2009-04-24 VansFannel

Tratto da display declaration:

display: inline significa che l'elemento viene visualizzato in linea, all'interno del blocco attuale sulla stessa linea. Solo quando si trova tra due blocchi l'elemento forma un 'blocco anonimo', che tuttavia ha la larghezza più piccola possibile di .

Non è possibile assegnare una larghezza o un'altezza di dimensioni di un elemento in linea, verranno ignorate. Un elemento deve avere un tipo di visualizzazione di block per farlo. L'impostazione di display: block tuttavia non raggiunge ciò che desideri poiché ogni elemento riempie l'intera larghezza. float: left li importerà a sinistra e impone anche display: block.

<head> 
<style type="text/css"> 
#wrap { 
    width:100%; 
} 
#wrap:after { 
    /* Prevent wrapper from shrinking height, 
    see http://www.positioniseverything.net/easyclearing.html */ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
#wrap .container { 
    float: left; 
    width:33%; 
} 
</style> 
</head> 
<body> 
    <div id="wrap"> 
     <div class="container"> </div> 
     <div class="container"> </div> 
     <div class="container"> </div> 
    </div> 
</body>

Mmmmm, la semantica

Vedi risposta da Phunky per ulteriori commenti su galleggiante.

fonte

2009-04-24 10:44:00 roryf

Sono solo io o questa risposta produce esattamente la stessa visualizzazione del codice nella domanda originale? Ho copiato il testo sopra in un editor di testo e salvato il file come file HTML dopo aver aggiunto i colori in modo da poter vedere i diversi div. Non riempie ancora l'intera larghezza della finestra. – Gineer

Quale browser? Funziona bene per me in FF3 e IE7. – roryf

Sono nuovo al css e la tua risposta include molti riferimenti utili! Grazie! – Bush

<body> 
    <div id="div0" style="float: left; background-color:green; width:100%"> 
     <div id="div1" style="float: left; background-color:aqua;width:33%">&nbsp;</div> 
     <div id="div2" style="float: left; background-color:red;width:33%">&nbsp;</div> 
     <div id="div3" style="float: left; background-color:yellow;width:33%">&nbsp;</div> 
    </div> 
</body>

Questo dovrebbe funzionare per voi. E la ragione IIRC è quella visualizzazione: inline non occupa la larghezza di%.

fonte

2009-04-24 09:49:49

Si potrebbe anche voler float: left on div0 – Greg

Fatto :) Grazie. –

display:inline shrink avvolge il contenuto. Potresti provare a provare float:left.

fonte

2009-04-24 09:51:00 annakata

Utilizzare il posizionamento relativo sull'esterno <div> e flottare l'interno <div> s. Non utilizzare display: inline.

<body> 
    <div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;"> 
    <div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div> 
    <div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div> 
    <div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div> 
    </div> 
</body>

fonte

2009-04-24 09:53:56 Tomalak

Rory Fitzpatrick ha più o meno la risposta ideale per voi, anche se non è necessario impostare pos: rel sul #wrapper in quanto è già un elemento di blocco relativo e coprirà l'intera larghezza per impostazione predefinita.

Quando si fa galleggiare un elemento di blocco, esso imita la funzionalità di allineamento del display: in linea e in un mondo ideale avremmo accesso alla visualizzazione molto utile: blocco in linea che avrebbe fatto esattamente ciò che si aspettava che facesse.

Ma una cosa da ricordare quando gli elementi fluttuanti è che occuperanno solo lo spazio di cui hanno bisogno (questo include margine e riempimento) a meno che non si imposti una larghezza fissa.

Questo è il motivo per cui Rory ha utilizzato la larghezza: 33%; come quello è il migliore che tu abbia mai ottenuto :)

Idealmente questo sarebbe stato un commento sul post di Rorys, ma non ho ancora ricevuto un numero di post abbastanza alto.

fonte

2009-04-25 20:05:14 Phunky

Pos rimossi: rel e collegati a questa risposta per voi :) – roryf

Invece di utilizzare il float, è possibile utilizzare il flexbox per un ridimensionamento più reattivo. Anche questo costringe gli elementi a rimanere in fila.

Esempio:

<head> 
    <style type="text/css"> 
    #wrap { 
     width:100%; 
     display:inline-flex; 
    } 
    #wrap:after { 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
     display: inline-flex; 
     flex-direction: row;  
    } 
    .container1 { 
     width:20%; 
    } 
    .container2{ 
     width:80%; 
    } 
    </style> 
</head> 
<body> 
<div id="wrap"> 
    <div class="container1"> </div> 
    <div class="container2"> </div> 
</div>

fonte

2014-01-03 18:02:13 Fralle

Il modo migliore per raggiungere questo obiettivo, al contrario di tutte le risposte date in precedenza, si possono trovare riferimento alla risposta a questa domanda:

3 inline-block divs with exactly 33% width not fitting in parent

Il più veloce e il modo più semplice non è il più bello da guardare (mettere i tuoi div sulla stessa linea per rimuovere lo spazio automatico singolo bianco fornito normalmente), ma funzionerà tremendamente per quello che vuoi. La risposta a cui faccio riferimento elenca un sacco di altri modi che, a mio parere, sono migliori di quelli forniti in precedenza, e affrontano il vero problema che stai affrontando.

Ecco il codice che funziona esattamente come desideri e un collegamento al violino!

<body> 
<div id="div0" style="float: left; background-color:green; width: 100%;"> 
    <div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%">&nbsp;</div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%">&nbsp;</div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%">&nbsp;</div> 
</div>

https://jsfiddle.net/stopitdan/uz1zLvhx/

fonte

2017-03-07 19:26:27 Dan

CSS, visualizzazione in linea e tre div

risposta

Problemi correlati