float:left; vs display: inline; vs display: inline-block; vs display: table-cell;

Moje pytanie(y)

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

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

  3. Czy to tylko osobiste preferencje?

  4. Brakuje mi innych technik?

uwaga: powyższe pytania dotyczą projektowania wielokolumnowego layout

Float: left;

Http://jsfiddle.net/CDe6a/

float: left image

Jest to metoda, której zawsze używam przy tworzeniu układów kolumn, i wydaje się, że działa dobrze. Rodzic jednak sam się zapada, więc musisz tylko pamiętać, aby clear:both; potem. Kolejny przekręt , który właśnie odkryłem, to niemożność wyrównania tekstu w pionie.

Display: inline;

To wydaje się rozwiązywać problem upadającego rodzica, ale dodaje spacje.

Http://jsfiddle.net/CDe6a/1/

wyświetlacz: obraz w linii

Usuwanie białych spacji z html wydaje się być najprostszym rozwiązaniem tego problemu, ale nie jest pożądane, jeśli jesteś naprawdę wybredny w swoim html.

Http://jsfiddle.net/CDe6a/2/

brak obrazu whitespace html

Display:inline-block;

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

Http://jsfiddle.net/CDe6a/3/

wyświetlacz: obraz bloku w linii

Display: table-cell;

Http://jsfiddle.net/CDe6a/4/

wyświetlacz: 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ę działać najlepiej i myślę, że zacznę zastępować float:left;, ponieważ zawsze psuję clear:both;. Czytałem wiele artykułów i blogów na ten temat na www, ale żaden z nich nie daje mi jednoznacznej odpowiedzi na to, z czego powinienem korzystać, układając swoją stronę.

Author: EGHDK, 2012-08-04
Source

6 answers

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

  • float:left;
    Nie lubię pływaków ze względu na potrzebę posiadania dodatkowych znaczników, aby wyczyścić pływak. Jeśli O mnie chodzi, cała koncepcja float była źle zaprojektowana w specyfikacji CSS. Nic na to nie poradzimy. Ale ważne jest to, że działa i działa we wszystkich przeglądarkach (nawet IE6/7), więc użyj go, jeśli ci się podoba.

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

  • display:inline;
    To nie powinno być używane do layoutu, z wyjątkiem IE6/7, gdzie display:inline; zoom:1 jest hackiem awaryjnym dla zepsutego wsparcia dla inline-block.

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

Inne duże zastrzeżenie z inline-block jest to, że ze względu na aspekt inline, białe spacje między elementami są traktowane tak samo jak białe spacje między słowami tekstu, więc można uzyskać przerwy pojawiające się między elementami. Jest w tym wiele pracy, ale żaden z nich nie jest idealny. (najlepiej jest po prostu nie mieć żadnych spacji między elementami)

  • display:table-cell;
    Kolejny, w którym będziesz miał problemy ze zgodnością przeglądarki. Starsze nie będą działać z tym w ogóle. Ale nawet w przypadku innych przeglądarek, warto zauważyć, że {[9] } jest zaprojektowany do użycia w kontekście bycia wewnątrz elementów, które są stylizowane jako table i table-row; używanie table-cell w izolacji nie jest zamierzonym sposobem, więc możesz doświadczyć różnych przeglądarek traktujących to inaczej.

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

  • Ponieważ mówisz, że jest to układ wielokolumnowy, istnieje funkcja CSS Columns feature, która może chcę o tym wiedzieć. Jednak nie jest to najbardziej wspierana funkcja (nie jest obsługiwana przez IE nawet w IE9, a prefiks dostawcy wymagany przez wszystkie inne przeglądarki), więc możesz nie chcieć jej używać. Ale jest to inna opcja, i zapytałeś.

  • Istnieje również funkcja CSS FlexBox, która ma na celu umożliwienie przepływu tekstu z pudełka do pudełka. Jest to ekscytująca funkcja, która pozwoli na kilka złożonych układów, ale to wciąż jest bardzo dużo w rozwoju ... zobacz http://html5please.com/#flexbox

Mam nadzieję, że to pomoże.
 201
Author: Spudley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-06 07:05:42

Zwykle używam float: left; i dodaję overflow: auto;do rozwiązuję zwijający się problem rodzica (co do tego, dlaczego to działa, overflow: auto rozszerzy rodzica zamiast dodawać paski przewijania, jeśli nie podasz jawnej wysokości, overflow: hidden również działa). Większość potrzeb wyrównania pionowego, jakie miałem, dotyczy jednego wiersza tekstu w paskach menu , które można rozwiązać za pomocą właściwości line-height. Jeśli naprawdę muszę wyrównać element blokowy w pionie, ustawiłbym wyraźną wysokość na elemencie nadrzędnym i wyrównanym w pionie, pozycja absolutna, najwyższe 50% i ujemna marża.

Powodem, dla którego nie używam display: table-cell jest sposób, w jaki przepełnia się, gdy masz więcej elementów, niż szerokość witryny może obsłużyć. komórka tabeli zmusi użytkownika do przewijania w poziomie, podczas gdy pływaki owiną menu przepełnienia, dzięki czemu będzie ono nadal użyteczne bez potrzeby przewijania w poziomie.

Najlepszą rzeczą w float: left I overflow: auto jest to, że działa aż do IE6 bez hacków, prawdopodobnie nawet dalej.

Tutaj wpisz opis obrazka

 34
Author: Lie Ryan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-06 06:32:40

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

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

  2. Jeśli potrzebujesz go do menu, możesz użyć inline-block. W przypadku problemu z białymi spacjami 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 potrzebujesz opcji wielokrotnego wyboru, której szerokość musi równomiernie rozłożyć się wewnątrz podanym polu, wtedy wolałbym display: table. To nie będzie działać poprawnie w niektórych przeglądarkach, więc to zależy od obsługi przeglądarki.

Wreszcie, co może być najlepszą metodą jest użycie flexbox. Spec na ten temat zmienił się kilka razy, więc nie jest jeszcze stabilny. Ale kiedy to zostanie sfinalizowane, będzie to najlepsza metoda, jak sądzę.

 9
Author: Zendy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-06 05:16:40

Wolę inline-block, chociaż float jest również przydatny. Table-cell nie jest poprawnie renderowany przez stare IEs (podobnie jak inline-block, ale jest zoom: 1; *display: inline hack, którego często używam). Jeśli masz dzieci, które mają mniejszy wzrost niż ich rodzic, pływaki doprowadzą je do góry, podczas gdy inline-block czasami spieprzy.

Przez większość czasu przeglądarka będzie interpretować wszystko poprawnie, chyba że, oczywiście, jest to IE. Zawsze trzeba sprawdzić, aby upewnić się, że IE nie ssać - na przykład pojęcie komórki tabelarycznej.

W całej rzeczywistości, tak, sprowadza się to do osobistych preferencji.

Jedną z technik, których możesz użyć, aby pozbyć się spacji, byłoby ustawienie font-size 0 rodzicowi, a następnie oddanie font-size z powrotem dzieciom, chociaż jest to kłopotliwe i obrzydliwe.

 4
Author: Chad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-04 02:39:18

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

Dla mnie głównym problemem przy wybieraniu metody jest to, czy potrzebujesz kolumn, aby wypełnić całą wysokość (równe wysokości), gdzie table-cell jest najprostszą metodą (jeśli nie dbasz zbytnio o starsze przeglądarki).

 4
Author: Wtower,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 07:39:34

Preferuję inline-block, ale float są nadal użytecznym sposobem łączenia elementów HTML, szczególnie gdy mamy elementy, które należy trzymać z lewej i z prawej strony, float działa lepiej przy pisaniu mniej linii, podczas gdy inline-block działa dobrze w wielu innych przypadkach.

Tutaj wpisz opis obrazka

 0
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-23 12:41:44