Zwykle, gdy chcemy mieć wiele DIVs
z rzędu, używamy float: left
, ale teraz odkryłem sztuczkędisplay:inline-block
Przykładowy link tutaj . Wydaje mi się, że display:inline-block
jest to lepszy sposób z align
DIVs
rzędu, ale czy są jakieś wady? Dlaczego takie podejście jest mniej popularne niż float
sztuczka?
inline
, a nieinline-block
. Ale pierwszy z powiązanych jest dobry: stackoverflow.com/a/11823622/918414Odpowiedzi:
W 3 słowach:
inline-block
jest lepiej.Blok wbudowany
Jedyną wadą tego
display: inline-block
podejścia jest to, że w IE7 i poniżej element może być wyświetlany tylkoinline-block
wtedy, gdy był jużinline
domyś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-block
jest to, że gdy inni programiści utrzymują Twój kod w późniejszym czasie, jest znacznie bardziej oczywiste, codisplay:inline-block
i cotext-align:right
próbuje osiągnąć, niż instrukcjafloat:left
lubfloat:right
. Mój ulubiony zaletąinline-block
podejścia jest to, że jest łatwy w obsłudzevertical-align: middle
,line-height
itext-align: center
aby 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
float
metoda nie nadaje się do układu strony, jest to, żefloat
wł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-space
wł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:
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Aktualizacja 2015 - Flexbox to dobra alternatywa dla nowoczesnych przeglądarek :
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
źródło
white-space
nieruchomości - czy mógłbyś to wyjaśnić?letter-spacing
innym miejscu w moim CSS.Chociaż zgadzam się, że generalnie
inline-block
jest 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-block
do 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:
float: left
. To „po prostu działa” (ale opakowanie musi zostać wyczyszczone).inline-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.inline-block
bez 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.źródło
div+(whitespace) {display:none}
czy coś?<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...
?)Jeśli chcesz wyrównać
div
z dokładnością do pikseli, użyj float.inline-block
wydaje się, że zawsze wymaga odcięcia kilku pikseli (przynajmniej w IE)źródło
* {padding:0px; margin:0px; }
ponieważ pomaga to zrównoważyć moje kodowanieSzczegółowe odpowiedzi można znaleźć tutaj .
Ale generalnie
float
trzeba być świadomym i dbać o otaczające elementy iinline-block
prostą drogę do elementów liniowych.Dzięki
źródło
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.
źródło