Czy istnieje prosty 3-kolumnowy, czysty układ CSS?

Jeden, który nie wymaga następujących czynności:Czy istnieje prosty 3-kolumnowy, czysty układ CSS?

Reliance na zdjęcia (czyli "faux kolumny")
Jakiś tajemniczości lub "hack" umieścić w specjalnie dla IE
Wymaga IE do uruchomienia w trybie quirks
nie ma dziwność jak jeden z trzech DIV nakładających się innym (czyli „święty Graal”)
Marginesy ustawione na wysokich liczb ujemnych umieszczając je również wyłączyć viewscreen (znowu „Holy Grail” układ)

Nie mogę znaleźć układu 3-kolumnowego w CSS, który nie opiera się na jednym z powyższych. A poleganie na jednym z powyższych wydaje się negować wiele zalet używania CSS nad tabelami. Nie chcę wymazywać Photoshopa i zmieniać rozmiaru obrazu za każdym razem, gdy chcę zmienić szerokość lewej kolumny. I nie chcę wyciągać kalkulatora, aby dowiedzieć się, ile pikseli znajduje się poza ekranem mojego DIV.

Powinienem wspomnieć, że szukam układu o jednakowej wysokości.

Ktoś?

EDYCJA: Szukam szerokości 100%, przy środkowej kolumnie będącej cieczą.

EDYCJA: Mam również nadzieję na określenie szerokości lewej i prawej kolumny w pikselach.

EDYCJA: Tła mogą być przezroczyste, ale chciałbym podzielić linię między kolumny, które biegną do góry i na dół.

Źródło

2009-05-15 Sean

Errare humanum est - Nie sądzę, że będziesz w stanie uciec bez hacków. Zwłaszcza z powodu równych wysokości. Zależy oczywiście od wersji CSS, którą chcesz być Twoją bazą. –

Należy określić swoje wymagania dotyczące obramowań i kolorów tła/obrazów. 3 kolumny z przezroczystym tłem i bez granic są łatwe do zrobienia. –

Nie ma czegoś takiego jak "proste", gdy mówisz o CSS.

Ale istnieje proste rozwiązanie, które jest przeglądarką, pogarsza się z gracją i jest w pełni zgodne z HTML i CSS: użyj tabeli z trzema kolumnami.

Uzasadnienie: DIV nie mają mieć tej samej wysokości dynamicznej. Dlatego CSS nie ma na to żadnego wsparcia. Jeśli potrzebujesz elementu blokowego, który upewnia się, że jego dzieci mają taką samą wysokość, to właśnie do tego służą tabele.

[EDIT] Przepraszam za urazę wszystkich fanatyków CSS, ale szczerze mówiąc, kiedy coś nie jest zaprojektowane, by coś zrobić, i nadużywasz go, a to nie działa, przestań narzekać, ok? DIV nie jest TABELI i nie może być używany jako jeden bez polegania na hakach.

[EDIT2] Jak już zostało powiedziane w various places, powód, aby nie używać tabel dla układu było to, że w dawnych czasach, stoły były tylko element projektu i które prowadzą do HTML, który miał dziesiątki tabel zagnieżdżonych. To źle. Ale to nie znaczy, że musisz nie używać używać pojedynczej tabeli, aby umieścić wszystko na miejscu, a następnie polegać na CSS, aby rzeczy wewnątrz wyglądały dobrze.

Mózg jest jak spadochron: dobrze jest mieć, ale jest przydatny tylko wtedy, gdy jest otwarty.

Źródło

2009-05-15 09:24:15

Tabele zostały zaprojektowane do wyrażania relacji między bitami danych (każda pozycja w wierszu ma coś wspólnego, a każdy element w kolumnie ma coś wspólnego). Uwzględnienie wszystkich komórek w rzędzie jest konsekwencją, a nie przyczyną. – Quentin

+10

Cóż, masz cel i masz dwa narzędzia. Jeden jest mile zaskoczony, a drugi wcale nie pasuje do rachunku ... którego używasz? –

+1 Nie ma wstydu przy użyciu układu tabeli, o ile pozostaje prosty. –

Zgadzam się z Robertem. Z powodu przeglądarki interpretującej reguły CSS i renderującej końcową stronę w inny sposób wątpię, że znajdziesz idealne rozwiązanie, nie będąc bardziej elastycznym w swoich wymaganiach.

Źródło

2009-05-15 09:23:36 Nick

Możesz to osiągnąć, używając jS.

Jeśli utworzysz 3 Dywy, jeden pływający opuścił jedną flotkę na prawo, a środkowy jako margines pozostawiając & w prawo z szerokością, aby ją wyśrodkować.

Następnie z odrobiną JS, każdy div mający swój własny ID, który można wykalibrować ich wysokość, ustaw 2 obniża je na najwyższą wartość.

Bardzo proste z Jquery.

Źródło

2009-05-15 10:13:43 Lee

To prawda, z javascript jest łatwy ... ale poprosił o czyste rozwiązanie CSS. –

-2

podzielić stronę na trzy kolumny, tej samej wysokości?

<html> 
<head> 
<style type="text/css"> 
#col_wrapper{ 
    height: 400px; 
} 

.col{ 
    width: 33%; 
    float:left; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="col_wrapper"> 
    <div class="col"> 
     one 
    </div> 
    <div class="col"> 
     two 
    </div> 
    <div class="col"> 
     three 
    </div> 
</div> 
</body>

bez dziwactw i ładnej równiny.

Źródło

2009-05-15 10:31:09 gunnarsson

Powinny wspomnieć, że stała wysokość nie działałaby. Jedna strona może zawierać 5 akapitów tekstu w środkowej kolumnie, druga może mieć 25. – Sean

http://960.gs/

ten można stosować do układu trzech kolumn (i różnych innych układów). Osobiście nie uważam, że dobrym pomysłem jest używanie elementów div do wszystkiego, ale jest to proste i dobrze działa.

edytuj: Dla układu o szerokości 100% http://www.alistapart.com/articles/fluidgrids/ może pomóc, ale nie jestem pewien, czy ten rodzaj układu nadal kwalifikuje się jako "prosty".

Źródło

2009-05-15 10:39:25

Niestety, powinienem wspomnieć, że szukam 100% szerokości (przy środkowej kolumnie będącej płynem). – Sean

Tak, ten z osobnej listy wygląda na nieco skomplikowany. Jedna z tych, w których nie jest jasne, która jest mniej pożądana, za pomocą skomplikowanego arkusza stylów lub przy użyciu tabeli, mimo że tabele nie są przeznaczone do układu. – Sean

Możesz być w stanie dostosować się:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Źródło

2009-05-15 12:25:15

Ten wygląda obiecująco, ale chyba powinienem był wspomnieć, że szukam go z kolumnami o szerokości w pikselach, a nie z procentową szerokością. Ta sama strona zawiera szablon dla szerokości piksela ("święty Graal", o którym wspomniałem powyżej), ale jest to bardzo zawiły arkusz stylów, który musiałbym powiedzieć, jest mniej pożądany niż użycie tabel do układu. Ten byłby jednak bardzo dobry dla kogoś, kto potrzebuje kolumn o szerokości procentowej. – Sean

Oto szerokość w pikselach: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm –

YAML

"Yet Another Układ Wielokolumnowa" (YAML) jest (X) ramy HTML/CSS dla tworząc nowoczesny i elastyczne układy pływające . Struktura ta jest wyjątkowo wszechstronna w zakresie programowania i jest dostępna dla użytkowników końcowych pod numerem .

Zawiera niektóre poprawki błędów IE, ale można je usunąć.

Źródło

2009-05-15 12:33:09 mjn

Zbyt wiele rzeczy nazywa się teraz YAML! –

Czy istnieje prosty 3-kolumnowy, czysty układ CSS?

Odpowiedz

Powiązane problemy