2010-02-17 5 views
8

Czy istnieje sposób wyrównania pierwszego wiersza wielu nagłówków o różnej wielkości do tej samej linii bazowej? Niezależnie od tekstu, który następuje, który również powinien być wyrównany.wyrównać nagłówki do tej samej linii bazowej, niezależnie od następującego tekstu?

Zobacz obraz w http://snapplr.com/snap/z1mw proszę

EDIT: re-upload:

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

Wydaje mi się, że jedynym rozwiązaniem jest wprowadzenie każdej pozycji i każdy tekst ciało w oddzielnym DIV i następnie z nagłówkami do grania z górnym lub górnym marginesem, aby je wyrównać (np. H1 miałby 36px z marginesem 0px, podczas gdy H3 byłby 24px z górnym marginesem 12px). Coś takiego:

<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> 

Ale to nie jest bardzo miłe rozwiązanie. Czy jest coś lepszego?

Dziękuję bardzo!

+0

Witamy w przepełnieniu stosu. –

+0

Sprawdziłem twoją próbkę w Photoshopie i potrzebujesz 12 px - to tylko rodzaj złudzenia optycznego ze względu na szeryfowe czcionki :) – easwee

+0

Powiększony http://img682.imageshack.us/img682/1604/optic. jpg – easwee

Odpowiedz

-1

Po prostu szybka myśl (jak w "Miałem ten pomysł, który może działać, ale nie przetestowałem go"): A co powiesz na użycie linii wysokości? Możesz użyć tej samej wysokości linii dla wszystkich nagłówków, zapewniając w ten sposób jednolitą linię podstawową na wszystkich liniach.

Pozdrowienia Jesper Hauge

4

Sieć obsługuje bazowe inaczej niż stosowane są w druku. Przeglądarek wyrównać tekst do środka z line-height, raczej niż na dole. Oznacza to, że tekst wyrównany do siatki siatki jest centralnie położony względem siebie, a nie na tej samej linii bazowej.

Jeśli wszystko jest w porządku, nadal można uzyskać z tego mocną siatkę. Po prostu musisz być dokładny przy użyciu kombinacji wysokości linii, wypełnienia, obramowań i marginesów. To wymaga trochę matematyki, ale jest całkowicie możliwe. Więcej tutaj:

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

Jeśli potrzebujesz rzeczy właściwie wyrównany do linii bazowej, jak wiesz, to w druku, gra jest o wiele trudniejsze. Problem polega na tym, że musisz naciskać różne kwoty w zależności od czcionki - prawie niemożliwe, gdy każda przeglądarka może używać innej czcionki. Oto jedna próba, aby to możliwe:

http://baselinecss.com/

albo roztworem istnieją problemy cross-browser. Internet nie oferuje jeszcze odpowiednich narzędzi do tego. Ale w żadnym wypadku nie potrzebujesz DIV. Możesz wykonać to samo dopasowanie w samych nagłówkach. Nie potrzebujesz ich nawet w swoim przykładzie. Dlaczego tam są divy?

+0

Thanks Eric, Artykuł 24ways wydaje się pokazać to samo rozwiązanie I przybył, czyli błahy z line-height, obicia itp tylko nadzieję tęsknię niektóre ukryte funkcje/rozwiązania CSS, które ułatwiają życie :-) Wydaje się obiecujące dla baselinecss.com. Musisz zagłębić się w kod, aby zobaczyć, co dokładnie robi. Jeśli chodzi o elementy div - był to jedyny sposób, w jaki mogłem wymyślić wyrównanie pierwszego wiersza kolejnych akapitów, na wypadek gdyby nagłówki z różnymi liniami były liczone (patrz zdjęcie w oryginalnym poście). Byłbym zadowolony, gdyby zobaczyłem lepsze rozwiązanie, ponieważ ten kod jest trochę niezgrabny :-( –

+0

Nie tylko są trochę niezgrabne, ale niszczą wszelkie sensy semantyczne, ponieważ nagłówki nie są dołączone do ich treści w porządku źródłowym, możesz równie dobrze używać tabel w tym punkcie Nie ma powodu, aby utrzymywać czystość CSS, jeśli jesteś gotów poświęcić całą twoją semantykę, aby to zadziałało, tak czy owak, najpierw semantykę, a potem dodam niektóre jQuery, jeśli naprawdę potrzebujesz efektu. –