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

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/

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/

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/

display: blok wbudowany;

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

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

display: komórka tabeli;

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

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ą.

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.

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.

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.

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.

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).

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 .