Moje pytania)
Czy którakolwiek z tych metod jest preferowana przez profesjonalnego projektanta stron internetowych?
Czy podczas rysowania strony internetowej którakolwiek z tych metod jest preferowana przez przeglądarkę internetową?
Czy to wszystko tylko osobiste preferencje?
Czy brakuje mi innych technik?
Uwaga: powyższe pytania dotyczą projektowania układu wielokolumnowego
float: left;
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.
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.
display: blok wbudowany;
Wydaje się zachowywać dokładnie tak jak display:inline;
.
display: komórka 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ę , ż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ą.
display: inline
właściwości i okazało się, że nie zajmuje się ona prawidłowo dopełnianiem elementów podrzędnych. Ale jeśli skorzystam zdisplay: inline-block
tego, zostanie to zrobione automatycznie. Proszę zobaczyć link - codepen.io/prashdeep/pen/rVOyvd Daj mi znać swoje dane na ten samOdpowiedzi:
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
float
koncepcja 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
:after
selektora 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:1
jest wycofany hack zepsutego wsparcia dlainline-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-block
jest 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-cell
jest przeznaczony do stosowania w kontekście bycia wewnątrz elementów, które są stylizowane jakotable
itable-row
; używanietable-cell
w 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.
źródło
inline-block
ponieważ jest stworzony specjalnie dla tych przypadków.em
s. Oznacza to, że może nie być odpowiednim rozwiązaniem we wszystkich przypadkach. Może ci się również spodobać ta odpowiedź, którą zamieściłem osobno, która obejmuje ten punkt, oraz inne opcje radzenia sobie z problemem białych znaków.Zwykle używam
float: left;
i dodaję,overflow: auto;
aby rozwiązać problem zwijającego się rodzica (dlatego, dlaczego to działa,overflow: auto
rozwinie element nadrzędny zamiast dodawać paski przewijania, jeśli nie podasz wyraźnej wysokości,overflow: hidden
dział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-height
wł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-cell
jest 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.
źródło
Powiedziałbym, że zależy to od tego, czego potrzebujesz:
Jeśli potrzebujesz go tylko po to, aby uzyskać układ 3 kolumn, sugeruję, aby to zrobić
float
.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/ .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.źródło
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: inline
czę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-size
wartości 0 dla rodzica, a następnie oddaniefont-size
dzieci, choć jest to kłopotliwe i obrzydliwe.źródło
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 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).
źródło
Wolę
inline-block
, alefloat
nadal 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 .źródło