allinea le intestazioni alla stessa linea di base, indipendentemente dal testo successivo?

c'è un modo per allineare la prima riga di intestazioni multiple di varie dimensioni alla stessa linea di base? Inoltre, indipendentemente dal testo che segue, che dovrebbe essere allineato.allinea le intestazioni alla stessa linea di base, indipendentemente dal testo successivo?

~~Vedi foto a http://snapplr.com/snap/z1mw prega~~

EDIT: ri-caricato:

alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

Mi sembra l'unica soluzione è quella di mettere ogni titolo e ogni testo corpo in DIV separata e quindi con i titoli da giocare con padding-top o margin-top per allinearli (ad es. H1 sarebbe 36px con margine 0px, mentre H3 sarebbe 24px con margine superiore 12px). Qualcosa di simile a questo:

<html> 
<head> 
    <style type="text/css" media="all"> 
     div { 
      width: 240px; 
      float: left; 
     } 

     h1 { 
      font-size: 36px; 
      margin: 0; 
      padding: 0; 
     } 

     h3 { 
      font-size: 24px; 
      margin: 0; 
      padding: 10px 0 0 0; /*for some reason I must use 10px instead of 12px to align. Why??*/ 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <h1>H1 heading</h1> 
    </div> 
    <div> 
     <h3>H3 heading</h3> 
    </div> 
    <div> 
     <h3>H3 heading that is somewhat longer and spans multiple lines</h3> 
    </div> 
    <div style="clear:both;"></div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
</body>

Ma questo non è molto bella soluzione. C'è qualcosa di meglio, per favore?

Grazie mille!

fonte

2010-02-17 Josef Richter

Benvenuti in overflow dello stack. –

Ho controllato il tuo campione in Photoshop e hai bisogno di 12 px - è solo una sorta di illusione ottica dovuta ai caratteri serif che il font ha :) – easwee

Ingrandito http://img682.imageshack.us/img682/1604/optic. jpg – easwee

-1

Solo un pensiero veloce (come in "Ho avuto questa idea, potrebbe funzionare, ma non l'ho provato"): che ne dici di usare l'altezza della linea? È possibile utilizzare la stessa altezza di riga per tutti i titoli, garantendo così una linea di base uniforme su tutte le linee.

saluti Jesper Hauge

fonte

2010-02-23 23:16:32 Hauge

Il web gestisce le linee di base in modo diverso rispetto a cui siete abituati in stampa. I browser allineano il testo al centro anziché a quello inferiore. Ciò significa che il testo allineato alla griglia web è centrato verticalmente in relazione l'un l'altro piuttosto che seduto sulla stessa linea di base.

Se sei d'accordo, puoi comunque ottenere una griglia forte. Devi solo essere esatto con il tuo uso combinato di altezza della linea, imbottitura, bordi e margini. Ci vuole un po 'di matematica, ma è del tutto possibile. Maggiori informazioni qui:

http://24ways.org/2006/compose-to-a-vertical-rhythm/

Se avete bisogno di cose in realtà allineati ad una linea di base come sapete in stampa, il gioco è molto più difficile. Il problema è che dovrai spingere le cose in quantità diverse a seconda del carattere esatto - difficilmente possibile quando ogni browser potrebbe utilizzare un font diverso. Ecco un tentativo di rendere questo possibile:

http://baselinecss.com/

Con entrambe le soluzioni ci sono problemi di cross-browser. Il web non offre ancora gli strumenti adeguati per questo ancora. Ma in nessun caso dovresti aver bisogno dei div. Puoi fare tutta questa regolazione sui titoli stessi. Non hai nemmeno bisogno di loro nel tuo esempio. Perché i div sono lì?

fonte

2010-03-03 01:04:23

Grazie Eric, L'articolo 24ways sembra mostrare la stessa soluzione sono arrivato a, cioè giocherellando con line-height, imbottitura, ecc È stato appena sperando che mi manca alcune caratteristiche/soluzioni CSS nascoste che semplificano la vita :-) baselinecss.com sembra promettente. Hai bisogno di scavare nel codice per vedere cosa fa esattamente. Per quanto riguarda i div - questo era l'unico modo in cui potevo pensare di allineare la prima riga dei seguenti paragrafi, nel caso avessi conte le intestazioni con varie linee (vedi immagine nel post originale). Sarei felice di vedere una soluzione migliore, poiché questo rende il codice un po 'goffo :-( –

Non solo sono un po' goffi, ma distruggono ogni senso di semantica, poiché le intestazioni non sono collegate al loro contenuto nell'origine del codice sorgente, potresti anche usare le tabelle in quel punto, non c'è motivo di mantenere puro CSS se sei disposto a sacrificare tutta la tua semantica per farlo funzionare comunque. Prima farei la semantica e poi aggiungerò qualche jQuery se hai davvero bisogno dell'effetto. –

allinea le intestazioni alla stessa linea di base, indipendentemente dal testo successivo?

risposta

Problemi correlati