Sto provando a flottare due div con diverse dimensioni dei caratteri. Non riesco a trovare un modo per allineare il testo sulla stessa linea di base. Ecco quello che ho provato:Allinea verticalmente div flottanti
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
Se si mette il diritto galleggiare div prima di sinistra galleggiava il div in HTML e faranno allineamento verticale.
In alternativa, è possibile spostare entrambi i div a sinistra, ovvero perfettamente validi, e in che modo la maggior parte dei disegni CSS viene codificata.
Ok, in primo luogo il puro modo CSS. È possibile ottenere l'allineamento verticale a fondo utilizzando relative+absolute positioning come questo:
<div id="header">
<div id="left">BIG</div>
<div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>
Si possono avere alcuni problemi con questo, come comportamento IE6 nonché le questioni z-index con le cose come i menu (l'ultima volta che ho provato questo mio menu è apparso sotto il contenuto assoluto).
Inoltre, a seconda che tutti gli elementi debbano essere posizionati o meno in modo assoluto, potrebbe essere necessario iniziare a fare cose come specificare l'altezza dell'elemento di contenimento in modo esplicito, che di solito è indesiderabile. Idealmente, vorresti che il contenitore si dimensionasse automaticamente per i suoi figli.
Il problema è che le linee di base dei caratteri di dimensioni diverse non coincidono e non conosco un modo "puro" CSS per farlo.
Con tavoli tuttavia la soluzione è banale :
<table id="header">
<tr>
<td id="left">BIG</td>
<td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>
Provatelo e vedrete che funziona perfettamente.
La folla anti-tavolo urlerà un omicidio blu, ma quanto sopra è il modo più semplice e compatibile con il browser (in particolare se è richiesto il supporto IE6) per farlo.
Oh e preferisco sempre utilizzare le classi per gli stili CSS in linea.
Principalmente idem. Preferisco definire un'altezza sul contenitore piuttosto che ricorrere ai tavoli, ma faccio principalmente lo sviluppo di app web in cui l'intero layout puzzolente è già posizionato in modo assoluto. Non mi aspetterei che IE6 lotti con quello a meno che non ci sia un mucchio di altre schifezze in corso :) –
Se si desidera allineare la linea di base del testo, non riesco a vedere in quale altro modo si possa fare che usare le tabelle. Le cose all'interno di un div sono fondamentalmente troppo indipendenti l'una dall'altra e gli intervalli non possono essere allineati volenti o nolenti. Usare le tabelle quando i tavoli sono la cosa sbagliata è sbagliato, usare le tabelle quando sono la cosa giusta è giusto. Usarli quando sono l'unica cosa che funziona è, comunque, perfettamente accettabile nel mio libro. – ijw
Preferirei "vertical-align: bottom" – asdfasdfads
Vuoi dire la linea di base nel senso tipografico? (Ovvero, ogni riga di testo è a livello con una riga corrispondente nell'altra colonna) Se questo è il caso, le dimensioni dei caratteri devono essere multipli l'una dell'altra - per esempio, 12 e 18px (1: 1.5).
Se si intende che i div devono essere alla stessa altezza, non esiste un modo semplice per farlo. È possibile impostare manualmente un'altezza (altezza: 100 px;) oppure utilizzare javascript per regolarne uno come le altre modifiche.
Oppure, è possibile simulare la stessa altezza racchiudendo i due div in un contenitore e quindi applicando uno stile di sfondo al contenitore che riproduce l'aspetto delle colonne, impostandolo per la ripetizione verticale. In questo modo, ottieni false colonne. Per un approfondimento, vedi questo classic A List Apart article.
Intendevi, avete due pezzi di testo, ed entrambi devono essere nella parte inferiore delle colonne? (mi dispiace, non posso ancora pubblicare un'immagine)
Un modo per farlo è utilizzare il metodo Faux Columns sopra.
L'altro modo è impostare il testo nel proprio contenitore all'interno del testo. Quindi, posiziona entrambi assolutamente nella parte inferiore delle colonne ...ecco una lunga frammento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
.col { width:200px; float:left; }
.short { height:200px; background:#eee; margin-bottom:20px; }
.long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */ }
#container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}
#big, #small { position:absolute; bottom:0px; width:200px; }
#big { height:100px; background:red; }
#small { height:20px; background:green; right:0px; }
</style>
</head>
<body>
<div id="container">
<div class="col long">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</div>
<div id="big" >BIG</div>
<div id="small">small</div>
</div>
</body>
</html>
Non ho idea di cosa intendessi dire, ma 18 non è un multiplo intero di 12 e, al contrario, * qualsiasi * è un multiplo non intero di 12. – ijw
Alcuni seriamente necromanzia con questo commento, ma penso che quello che intendeva era che avevano bisogno di condividere un fattore comune, che in questo caso sarebbe 6. – Isochronous
modificare appena ri-leggere le domande e vide una scatola ha bisogno flottante a destra ... in modo che il seguito non funziona ... ma potrebbe essere adattabile
Prima di tutto, dovresti usare span piuttosto che div perché il contenuto sarà in linea per finire. Non conosco i dettagli del perché, ma questo significa che i tuoi elementi si comportano in modo un po 'più amichevole tra i vari browser.
Una volta fatto questo, questo funziona a meraviglia, anche in IE6 e 7:
#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}
<div id="header">
<span id="left">BIG</span>
<span id="right">SMALL</span>
</div>
+1, grazie - ho appena cambiato i miei paras flottati in blocchi inline, e lo fa davvero lavoro! – halfer
È possibile eseguire questa operazione utilizzando line-height ma funziona solo su elementi in linea e se il testo non lo fa avvolgere.
<div id="header" style="overflow:hidden;">
<span id="left" style="font-size:40px;">BIG</span>
<span id="right" style="line-height:48px;">SMALL</span>
</div>
ho cambiato il div-span. Se vuoi mantenere div aggiungi semplicemente display:inline al tuo stile.
<div id="header" style="overflow:hidden;">
<div id="left" style="font-size:40px;display:inline;">BIG</div>
<div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>
Questo non li aiuta a coincidere con la linea di base, che è la domanda (ho fatto lo stesso errore fino a quando l'ho riletto). – cletus
Anche io ho pensato la stessa cosa! –