Zalety korzystania z display: inline-block vs float: left w CSS

Zwykle, gdy chcemy mieć wiele DIVsz rzędu, używamy float: left, ale teraz odkryłem sztuczkędisplay:inline-block

Przykładowy link tutaj . Wydaje mi się, że display:inline-blockjest to lepszy sposób z align DIVsrzędu, ale czy są jakieś wady? Dlaczego takie podejście jest mniej popularne niż floatsztuczka?

W 3 słowach: inline-blockjest lepiej.

Blok wbudowany

Jedyną wadą tego display: inline-blockpodejścia jest to, że w IE7 i poniżej element może być wyświetlany tylko inline-blockwtedy, gdy był już inlinedomyślnie. Oznacza to, że zamiast używać <div>elementu, musisz użyć <span>elementu. To wcale nie jest wielka wada, ponieważ semantycznie a <div>służy do dzielenia strony, podczas gdy a <span>służy po prostu do pokrycia zakresu strony, więc nie ma dużej różnicy semantycznej. Ogromną zaletą display:inline-blockjest to, że gdy inni programiści utrzymują Twój kod w późniejszym czasie, jest znacznie bardziej oczywiste, co display:inline-blocki co text-align:right próbuje osiągnąć, niż instrukcja float:leftlub float:right. Mój ulubiony zaletą inline-blockpodejścia jest to, że jest łatwy w obsłudze vertical-align: middle, line-heightitext-align: centeraby idealnie wyśrodkować elementy w intuicyjny sposób. Znalazłem świetny post na blogu o tym, jak zaimplementować blokowanie inline w różnych przeglądarkach, na blogu Mozilli . Oto zgodność przeglądarki .

Pływak

Powodem, dla którego ta floatmetoda nie nadaje się do układu strony, jest to, że floatwłaściwość CSS pierwotnie miała służyć jedynie do zawijania tekstu wokół obrazu (w stylu magazynu) i z założenia nie jest najlepiej dostosowana do ogólnych celów związanych z układem strony. Podczas późniejszej zmiany elementów pływających czasami mogą wystąpić problemy z pozycjonowaniem, ponieważ nie występują one w przepływie strony . Inną wadą jest to, że generalnie wymaga poprawek, w przeciwnym razie może zepsuć niektóre aspekty strony. Clearfix wymaga dodania elementu za elementami pływającymi, aby powstrzymać ich rodzica przed zapadnięciem się wokół nich, co przecina linię semantyczną między oddzieleniem stylu od treści i tym samym jest anty-wzorcem w programowaniu stron internetowych .

Wszelkie problemy z białymi znakami wymienione w powyższym linku można łatwo naprawić za pomocą white-spacewłaściwości CSS.

Edytować:

SitePoint jest bardzo wiarygodnym źródłem porad dotyczących projektowania stron internetowych i wydaje się, że mają to samo zdanie co ja:

Jeśli jesteś nowicjuszem w układach CSS, wybaczono ci myśl, że używanie elementów pływających CSS w pomysłowy sposób jest szczytem umiejętności. Jeśli zużyłeś tyle samouczków dotyczących układu CSS, ile możesz znaleźć, możesz przypuszczać, że opanowanie elementów pływających jest rytuałem przejścia. Będziesz oszołomiony pomysłowością, zdumiony złożonością i zyskasz poczucie osiągnięcia, gdy w końcu zrozumiesz, jak działają platformy.

Nie daj się zwieść. Masz pranie mózgu.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Aktualizacja 2015 - Flexbox to dobra alternatywa dla nowoczesnych przeglądarek :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Więcej informacji

Aktualizacja z 21 grudnia 2016 r

Bootstrap 4 usuwa obsługę IE9, a tym samym usuwa elementy zmiennoprzecinkowe z wierszy i przechodzi na pełny Flexbox.

Żądanie ściągnięcia nr 21389

Chociaż zgadzam się, że generalnie inline-blockjest lepiej, jest jeszcze jedna rzecz, którą należy wziąć pod uwagę, jeśli używasz szerokości procentowych do tworzenia responsywnej siatki (lub jeśli chcesz, aby szerokości były idealne w pikselach):

Jeśli używasz inline-blockdo siatek o łącznej szerokości 100% lub blisko 100%, musisz upewnić się, że znaczniki HTML nie zawierają spacji między kolumnami .

W przypadku elementów zmiennoprzecinkowych nie musisz się tym martwić - kolumny znajdują się nad białymi znakami lub inną zawartością między kolumnami. Odpowiedzi na to pytanie zawierają dobre wskazówki dotyczące sposobów usuwania białych znaków HTML bez powodowania brzydkiego kodu .

Jeśli z jakiegoś powodu nie możesz kontrolować znaczników HTML (np. Restrykcyjny CMS), możesz wypróbować opisane tutaj sztuczki lub być może będziesz musiał pójść na kompromis i użyć floatów zamiast inline-block. Istnieją również brzydkie sztuczki CSS, których należy używać tylko w ekstremalnych okolicznościach, font-size:0;na przykład w kontenerze kolumn, a następnie ponownie zastosować rozmiar czcionki w każdej kolumnie .

Na przykład:

• Oto 3-kolumnowa siatka o szerokości 33,3% zfloat: left . To „po prostu działa” (ale opakowanie musi zostać wyczyszczone).
• Oto dokładnie ta sama siatka, zinline-block . Białe znaki między blokami tworzą przestrzeń o stałej szerokości, która przesuwa całkowitą szerokość powyżej 100%, łamiąc układ i powodując, że ostatnia kolumna opuszcza wiersz.
• Oto ta sama siatka inline-blockbez spacji i bez odstępów między kolumnami w kodzie HTML . To znowu „po prostu działa” - ale HTML jest brzydszy, a Twój CMS może wymusić jakiś rodzaj upiększania lub wcięcia swojego wyjścia HTML, utrudniając to w rzeczywistości.

Jeśli chcesz wyrównać divz dokładnością do pikseli, użyj float. inline-blockwydaje się, że zawsze wymaga odcięcia kilku pikseli (przynajmniej w IE)

Szczegółowe odpowiedzi można znaleźć tutaj .

Ale generalnie floattrzeba być świadomym i dbać o otaczające elementy i inline-blockprostą drogę do elementów liniowych.

Dzięki

Jest jedna cecha związana z blokiem inline, która jednak może nie być prosta. Oznacza to, że domyślną wartością wyrównania w pionie w CSS jest linia bazowa. Może to spowodować nieoczekiwane zachowanie wyrównania. Spójrz na ten artykuł.

http://www.brunildo.org/test/inline-block.html

Zamiast tego, kiedy robisz float: left, elementy div są od siebie niezależne i możesz je łatwo wyrównać za pomocą marginesów.