2013-06-13 23 views
5

Próbuję zintegrować purecss z projektem, nad którym pracowałem.Co się tutaj dzieje z purecsami?

Z jakiegoś powodu po prostu zmyliłem swój układ, więc próbowałem stworzyć niezwykle prymitywny szablon (poniżej), a ja po prostu dostaję zabawny odstęp między literami. Co się dzieje?

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css"> 
    </head> 
    <body> 
     <div class="pure-g-r"> 
     <div class="pure-u-2-4"> 
      <p>Left side.</p> 
     </div> 
     <div class="pure-u-2-4"> 
      <p>Right side.</p> 
     </div> 
     </div> 
    </body> 
</html> 

JSBin pokazujący problem:

http://jsbin.com/ubarag/1/edit

Mój kod wydaje się być poprawne, gdy patrząc na przykładach, więc należy zrobić coś naprawdę oczywiste/głupi ...

Edit:

Pojawia się być połączony z tymi twoissues, z wyjątkiem żadnego obejścia w komentarze działają dla mnie.

Odpowiedz

7

Klasa pure-u-2-4 nie jest rozpoznawany przez Pure. Zamiast tego użyj klasy pure-u-1-2, aby uzyskać kolumny o szerokości 50%:

<div class="pure-g-r"> 
    <div class="pure-u-1-2"> 
    <p>Left side.</p> 
    </div> 
    <div class="pure-u-1-2"> 
    <p>Right side.</p> 
    </div> 
</div> 
+0

Idealne, to dzięki. Czy purecsy nie automagicznie unoszą elementu div, aby tworzyć kolumny, czy też potrzebuję do tego własnego css? – Anonymous

+1

Jeśli dobrze rozumiem, o co pytasz, powinna. Jeśli rozszerzysz szerokość panelu wyjściowego twojego przykładu JSBin, dwie kolumny ostatecznie przeskoczą do tego samego wiersza. –

+0

Jeszcze raz. Zapomniałem, że używałem czystej-g-r, a nie czystej-g. Dzięki za pomoc. – Anonymous

0

w czystej-min.css na linii 14 masz ten

.pure-g-r { 
letter-spacing: -.31em; 
} 

to spowodować szalony nas rozstaw

usunąć go lub przepisać w innym pliku css

+0

Wiem, że to konkretna reguła je powodująca, ale dlaczego domyślnie? (Zarówno w wersjach na CDN i na Github). Coś innego musi być tu nie w porządku. – Anonymous

+2

Odpowiedź "dlaczego" znajduje się w jednym z problemów, z którymi się łączyłeś (zobacz: https://github.com/yui/pure/issues/41#issuecomment-18747575). Nie podoba ci się to? Albo nie używaj Pure ani nie zmieniaj go ręcznie. – cimmanon

+1

@imimmanon - Ten komentarz (Github) nie był pomocny, odpowiedź Russa Ferri jest poprawna. – Anonymous

Powiązane problemy