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

127

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?

Ryan
źródło
@Moak Te konkretne pytania dotyczą inline, a nie inline-block. Ale pierwszy z powiązanych jest dobry: stackoverflow.com/a/11823622/918414
ThinkingStiff
2
przykładowy link jest martwy
information_interchange

Odpowiedzi:

156

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

Alex W.
źródło
4
„clearfix” to tylko nazwa; „poprawka” oznacza naprawę nieprawidłowych oczekiwań i / lub nieprawidłową implementację przeglądarki. Zgadzam się (szczęśliwie), że istnieją alternatywy dla unoszenia się / oczyszczania, ale nie ma w tym nic z natury zepsutego ani naprawionego.
Tim Medora
10
@Alex - czy istnieje niezakłócony, kompatybilny z różnymi przeglądarkami sposób na usunięcie białych znaków między elementami inline-block, które znajdują się w oddzielnych wierszach? Chciałbym móc przestać używać pływaków, ale najlepsze linki, jakie udało mi się znaleźć na temat tego problemu ( tutaj i tutaj ), są niezadowalające. Wspomniałeś o white-spacenieruchomości - czy mógłbyś to wyjaśnić?
antinome
3
@Alex - dzięki, to bardzo fajne, ale nadal uważam podejście float-with-modern-clearfix za nieco łatwiejsze w utrzymaniu, ponieważ nie zepsuje się, jeśli kiedyś zdarzy mi się dostosować w letter-spacinginnym miejscu w moim CSS.
antinome
1
dlaczego bootstrap nadal używa float w swoim systemie grid? Czy to nie są układy?
AzDesign
2
Pamiętaj, że inline-block dodaje odstępy wokół elementów. Jeśli używasz go jako siatki lub nie chcesz tego białego miejsca, będziesz musiał dodać dodatkowe hacki dotyczące stylów / HTML, aby to uwzględnić. Zobacz: css-tricks.com/fighting-the-space-between-inline-block-elements/…
kretzm
23

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:

user56reinstatemonica8
źródło
czy jest jakieś możliwe obejście braku białych znaków między, może div+(whitespace) {display:none}czy coś?
NoBugs
1
Zobacz trzeci akapit po pierwszym zdaniu ... Szczególnie zobacz powiązane pytanie
user56reinstatemonica8
@NoBugs po prostu zastosuj rozmiar czcionki: 0; do elementu zawierającego, po prostu uważaj, jeśli nie masz określonych rozmiarów czcionek ustawionych na elementach w blokach inline !!
Jai
@Jai Dokładnie, a ponieważ stylizacja / widok powinien być odłączony od procesu tworzenia html / modelu, jest to zła praktyka. (A co, jeśli korzystasz z usługi, która ci dała <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs
4

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)

Vins
źródło
6
Tak, to dlatego, że musisz unikać używania spacji między elementami, ponieważ bloki inline uwzględniają spacje w taki sam sposób, jak elementy wbudowane. Trzymaj tagi inline-block ściśle ze sobą i bez problemów z pikselami.
Ben Sinclair
Może to być również różnica w przeglądarce z domyślnym dopełnieniem / marginesem na elementach. Cóż, przynajmniej w przeszłości zawsze to robiłem, * {padding:0px; margin:0px; }ponieważ pomaga to zrównoważyć moje kodowanie
Angry 84
Czy to jest powód, dla którego Bootstrap (może inni) używają go, a nie inline-block?
NoBugs
1

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

abhijit
źródło
1

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.

Sydnej
źródło