2009-02-24 11 views
38

Zastanawiam się, czy ktoś tutaj miał dość prosty samouczek dla następującego 2 układu css kolumny. Lewa stała kolumna i kolumna z zawartością płynu, z nagłówkiem i stopką oraz równymi wysokościami kolumn.Układ CSS 2-kolumna stała-płynna

+1

Większość tego, co wiem na temat HTML i CSS I nauczyłem się od [HTML Dog] (http://htmldog.com). HTML Dog ma [stronę w swoim samouczku] (http://htmldog.com/guides/cssadvanced/layout/) o tworzeniu układu dwóch kolumn ze stopką. –

Odpowiedz

1

Ten, którego używam, to sztuczka z układem kolumn, która nie zawiera skryptów.

Oto poradnik, który wydaje się być prostym wyjaśnieniu pojęcia: dustinbrewer.com

Oto oryginalny alistapart.com artykuł, że dowiedział się od: alistapart.com

powodzenia!

45

Istnieje jeszcze łatwiejsze rozwiązanie tego, co odkryłem nie tak dawno temu. Działa dobrze z powrotem do IE7. Element #fluid div przesunie się obok ustalonej poprawki i zajmie pozostałą przestrzeń, zachowując jednocześnie dużą płynność dla wszystkich responsywnych witryn.

http://jsfiddle.net/uEj55/1/

#fixed{ 
    width:150px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
} 
+0

Czy można uzyskać równe wysokości kolumn? Zobacz tę wersję demo, nie chciałbym widzieć czerwieni. http://jsfiddle.net/louiswalch/uEj55/92/ –

+1

To rozwiązanie działa również świetnie, jeśli chcesz ustawić kolumnę po prawej i płyn po lewej stronie. Po prostu zmień css dla #fixed na float: right. – ctown4life

+2

To jest wspaniałe - czy możesz wyjaśnić, co przepełnia: ukryty w tym kontekście? – IcedDante

Powiązane problemy