float: left; vs wyświetlanie: wbudowany; vs wyświetlanie: blok wbudowany; vs wyświetlanie: komórka tabeli;

281

Moje pytania)

  1. Czy którakolwiek z tych metod jest preferowana przez profesjonalnego projektanta stron internetowych?

  2. Czy podczas rysowania strony internetowej którakolwiek z tych metod jest preferowana przez przeglądarkę internetową?

  3. Czy to wszystko tylko osobiste preferencje?

  4. Czy brakuje mi innych technik?

Uwaga: powyższe pytania dotyczą projektowania układu wielokolumnowego


float: left;

http://jsfiddle.net/CDe6a/

float: lewy obraz

Jest to metoda, której zawsze używam podczas tworzenia układów kolumn i wydaje się, że działa dobrze. Jednak rodzic sam się załamuje, więc musisz o tym pamiętać clear:both;. Kolejną wadą , którą właśnie znalazłem, była niemożność wyrównania tekstu w pionie.

display: inline;

Wydaje się, że to rozwiązuje problem zwijającego się rodzica, ale dodaje spacje.

http://jsfiddle.net/CDe6a/1/

wyświetlanie: obraz w linii

Usunięcie białych znaków z html wydaje się najłatwiejszym rozwiązaniem tego problemu, ale nie jest pożądane, jeśli jesteś naprawdę wybredny w kwestii html.

http://jsfiddle.net/CDe6a/2/

brak obrazu spacji w formacie HTML

display: blok wbudowany;

Wydaje się zachowywać dokładnie tak jak display:inline;.

http://jsfiddle.net/CDe6a/3/

wyświetlanie: obraz w bloku

display: komórka tabeli;

http://jsfiddle.net/CDe6a/4/

wyświetlanie: obraz komórki tabeli

Działa idealnie.

Moje myśli:

Jestem pewien, że brakuje mi wielu rzeczy, takich jak pewne wyjątki, które zepsują układ, ale display:table-cell;wydaje się , że działają najlepiej i myślę, że zacznę zastępować, float:left;ponieważ zawsze wydaje mi się, że popsuję clear:both;. Przeczytałem wiele artykułów i blogów na ten temat w Internecie, ale żaden z nich nie daje mi jednoznacznej odpowiedzi na temat tego, czego powinienem użyć, tworząc swoją stronę internetową.

EGHDK
źródło
4
Zobacz, czego używają faceci z html5boilerplate i Twitter Bootstrap i trzymaj się tego
Robert Niestroj
1
Jest świetny artykuł na temat walki z kosmosem na css-tricks: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea
Próbowałem użyć display: inlinewłaściwości i okazało się, że nie zajmuje się ona prawidłowo dopełnianiem elementów podrzędnych. Ale jeśli skorzystam z display: inline-blocktego, zostanie to zrobione automatycznie. Proszę zobaczyć link - codepen.io/prashdeep/pen/rVOyvd Daj mi znać swoje dane na ten sam
zilcuanu

Odpowiedzi:

200

Z opcji, o które pytałeś:

  • float:left;
    Nie lubię floatów z powodu potrzeby posiadania dodatkowych znaczników, aby wyczyścić float. Jeśli o mnie chodzi, cała floatkoncepcja została źle zaprojektowana w specyfikacji CSS. Teraz jednak nic nie możemy na to poradzić. Ale ważne jest to, że działa i działa we wszystkich przeglądarkach (nawet IE6 / 7), więc używaj go, jeśli ci się podoba.

Dodatkowe znaczniki do czyszczenia mogą nie być konieczne, jeśli używasz :afterselektora do czyszczenia pływaków, ale nie jest to opcja, jeśli chcesz obsługiwać IE6 lub IE7.

  • display:inline;
    Nie należy tego używać w przypadku układu, z wyjątkiem IE6 / 7, gdzie display:inline; zoom:1jest wycofany hack zepsutego wsparcia dla inline-block.

  • display:inline-block;
    To moja ulubiona opcja. Działa dobrze i konsekwentnie we wszystkich przeglądarkach, z zastrzeżeniem dla IE6 / 7, które obsługują go dla niektórych elementów. Ale patrz wyżej, aby hacky rozwiązanie tego obejścia.

Innym dużym zastrzeżeniem inline-blockjest to, że ze względu na aspekt wewnętrzny białe przestrzenie między elementami są traktowane tak samo jak białe przestrzenie między słowami tekstu, dzięki czemu można uzyskać przerwy między elementami. Są obejścia tego, ale żadne z nich nie jest idealne. (najlepsze jest po prostu brak odstępów między elementami)

  • display:table-cell;
    Kolejny, w którym będziesz mieć problemy ze zgodnością przeglądarki. Starsze IE nie będą w ogóle z tym działały. Ale nawet w przypadku innych przeglądarek warto zauważyć, że table-celljest przeznaczony do stosowania w kontekście bycia wewnątrz elementów, które są stylizowane jako tablei table-row; używanie table-cellw odosobnieniu nie jest zamierzonym sposobem, aby to zrobić, więc możesz doświadczyć, że różne przeglądarki traktują to inaczej.

Inne techniki, które mogłeś przegapić? Tak.

  • Ponieważ mówisz, że jest to układ wielokolumnowy, istnieje funkcja CSS Columns , o której warto wiedzieć. Jednak nie jest to najlepiej obsługiwana funkcja (nie obsługiwana przez IE nawet w IE9 oraz prefiks dostawcy wymagany przez wszystkie inne przeglądarki), więc możesz nie chcieć jej używać. Ale to kolejna opcja i pytałeś.

  • Istnieje również funkcja CSS FlexBox, która ma na celu umożliwienie przepływu tekstu z pola do pudełka. To ekscytująca funkcja, która pozwoli na skomplikowane układy, ale wciąż jest ona w fazie rozwoju - patrz http://html5please.com/#flexbox

Mam nadzieję, że to pomaga.

Spudley
źródło
2
nie potrzebujesz dodatkowych znaczników, aby wyczyścić zmiennoprzecinkowe, zobacz moją odpowiedź na ten temat.
Lie Ryan,
3
Najbardziej niezawodna odpowiedź = odpowiedź.
EGHDK,
2
Zawsze używam, inline-blockponieważ jest stworzony specjalnie dla tych przypadków.
Rápli András
1
Dobra metoda usuwania wyświetlanych białych znaków: blok inline tworzy, możesz ustawić rozmiar czcionki na 0 na elemencie kontenera, a następnie ustawić żądane dla samych elementów inline. Pozwala to uniknąć konieczności usuwania białych znaków w html
AlexMorley-Finch
1
@ AlexMorley-Finch: Rzeczywiście, to jest jedno dobre rozwiązanie. Pamiętaj jednak, że nie działa, jeśli używasz rozmiarów czcionek w ems. Oznacza to, że może nie być odpowiednim rozwiązaniem we wszystkich przypadkach. Może ci się również spodobać ta odpowiedź, którą zamieściłem osobno, która obejmuje ten punkt, oraz inne opcje radzenia sobie z problemem białych znaków.
Spudley,
34

Zwykle używam float: left;i dodaję, overflow: auto;aby rozwiązać problem zwijającego się rodzica (dlatego, dlaczego to działa, overflow: autorozwinie element nadrzędny zamiast dodawać paski przewijania, jeśli nie podasz wyraźnej wysokości, overflow: hiddendziała również). Większość potrzebnych do wyrównania w pionie dotyczy jednego wiersza tekstu na paskach menu , które można rozwiązać za pomocą line-heightwłaściwości. Jeśli naprawdę muszę wyrównać element blokowy w pionie, ustawiłbym wyraźną wysokość elementu nadrzędnego i elementu wyrównanego w pionie, pozycję absolutną, górną 50% i ujemny margines.

Powodem, dla którego nie używam display: table-celljest sposób, w jaki się przepełnia, gdy masz więcej elementów niż jest w stanie obsłużyć szerokość witryny. table-cell zmusi użytkownika do przewijania w poziomie, podczas gdy float zawinie menu przepełnienia, czyniąc go nadal użytecznym bez potrzeby przewijania w poziomie.

Najlepszą rzeczą w float: left i overflow: auto jest to, że działa aż do IE6 bez włamań, prawdopodobnie jeszcze dalej.

wprowadź opis zdjęcia tutaj

Lie Ryan
źródło
Ten doskonały punkt, nie wymieniony w WIELU popularnych tutorialach. Kilka pytań: czy jest to faktycznie testowane w różnych przeglądarkach? Jaka jest twoja metoda wyboru do narysowania separatora między dwoma blokami, takimi jak nawigacja i treść? Powód, dla którego pytam, jest taki, że jeśli powyższe divy są innej wysokości, byłoby to trudne.
Shital Shah
@ShitalShah: Nie jestem do końca pewien, co rozumiesz przez „to”, ale zaimplementowałem niezliczone menu poziome, a pływak w lewo i przepełnienie to IMO najczystszy i najbardziej niezawodny sposób na wdrożenie menu poziomego w wielu różnych przeglądarkach, starych i Nowy. Do dodawania separatorów zwykle używałbym lewej krawędzi (lub obrazów tła dla bardziej wyszukanych separatorów, jeśli nie musisz przejmować się starymi przeglądarkami, możesz także użyć obrazu krawędzi CSS3). Nie do końca rozumiem, co masz na myśli mówiąc o różnych wysokościach, chcesz wyjaśnić więcej lub dodać skrzypce?
Lie Ryan,
To wyjaśniło wiele na temat rozliczeń i nie wiedziałem, że przepełnienie może to zrobić. Jestem przyzwyczajony do: po metodzie, w której dodajesz treść: „.” i widoczność: ukryta. Dzięki za to
Nils_e
9

Powiedziałbym, że zależy to od tego, czego potrzebujesz:

  1. Jeśli potrzebujesz go tylko po to, aby uzyskać układ 3 kolumn, sugeruję, aby to zrobić float.

  2. Jeśli potrzebujesz go do menu, możesz użyć inline-block. W przypadku problemu z białymi znakami możesz użyć kilku sztuczek opisanych przez Chrisa Coyiera tutaj http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .

  3. Jeśli chcesz zrobić opcję wielokrotnego wyboru, której szerokość musi równomiernie rozłożyć się w określonym polu, wolałbym display: table. To nie działa poprawnie w niektórych przeglądarkach, więc zależy to od obsługi przeglądarki.

Wreszcie, co może być najlepszą metodą flexbox. Specyfikacja tego zmieniła się kilka razy, więc nie jest jeszcze stabilna. Ale kiedy zostanie sfinalizowany, będzie to najlepsza metoda, którą uważam.

Zendy
źródło
+1 za link do artykułu Chrisa Coyiera. Jednym z dodatków do tej listy jest metoda, której używają siatki Pure CSS YUI : github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

Wolę blok wbudowany, chociaż float jest również przydatny. Komórka tabeli nie jest poprawnie renderowana przez stare IE (nie blokuje również wstawiania, ale zoom: 1; *display: inlineczęsto używam włamania). Jeśli masz dzieci, które mają mniejszy wzrost niż ich rodzic, pływaki doprowadzą je na szczyt, podczas gdy blok liniowy czasami się psuje.

W większości przypadków przeglądarka interpretuje wszystko poprawnie, chyba że oczywiście jest to IE. Zawsze musisz sprawdzić, czy IE nie jest do kitu - na przykład koncepcja komórki tabeli.

W rzeczywistości wszystko sprowadza się do osobistych preferencji.

Jedną z technik, której możesz użyć, aby pozbyć się białej przestrzeni, byłoby ustawienie font-sizewartości 0 dla rodzica, a następnie oddanie font-sizedzieci, choć jest to kłopotliwe i obrzydliwe.

Czad
źródło
jeśli „zawsze musisz sprawdzić, czy IE nie jest do bani”, zawsze będziesz rozczarowany. hehe. (Z drugiej strony ma rację, mówiąc, że zawsze powinieneś sprawdzać, czy Twój kod nie zasysa każdej wersji IE, którą chcesz wesprzeć)
Spudley
4

Tylko dla zapisu, aby dodać do odpowiedzi Spudleya, istnieje również możliwość użycia position: absolutei marginesów, jeśli znasz szerokości kolumn.

Dla mnie głównym problemem przy wyborze metody jest to, czy potrzebujesz kolumn do wypełnienia całej wysokości (równych wysokości), gdzie komórka tabeli jest najłatwiejszą metodą (jeśli nie zależy ci zbytnio na starszych przeglądarkach).

Wtower
źródło
0

Wolę inline-block, ale floatnadal są użytecznym sposobem na łączenie elementów HTML, zwłaszcza gdy mamy elementy, które należy trzymać po lewej, a drugi po prawej stronie, unosić się lepiej przy pisaniu mniejszej liczby wierszy, a blok wstawiania działa dobrze w wielu innych przypadkach .

wprowadź opis zdjęcia tutaj

Alireza
źródło