Ok, tydzień lub dwa temu miałem prosty problem z układem. Mianowicie sekcje strony wymagały nagłówka:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Całkiem proste rzeczy. Rzecz w tym, że nienawiść do tabel zdaje się przejąć kontrolę w świecie sieci Web, o czym przypomniałem sobie, gdy zapytałem Po co używać tagów list definicji (DL, DD, DT) w formularzach HTML zamiast tabel? Teraz omówiono już ogólny temat tabel vs div / CSS, na przykład:
Więc to nie jest ogólna dyskusja na temat CSS i tabel w układzie. To jest po prostu rozwiązanie jednego problemu. Wypróbowałem różne rozwiązania powyższego za pomocą CSS, w tym:
- Przenieś się w prawo dla przycisku lub elementu div zawierającego przycisk;
- Pozycja względem przycisku; i
- Pozycja względna + bezwzględna.
Żadne z tych rozwiązań nie było zadowalające z różnych powodów. Na przykład względne pozycjonowanie spowodowało problem z indeksem Z, w którym moje menu rozwijane pojawiło się pod treścią.
Więc wróciłem do:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
I działa doskonale. Jest to proste, tak kompatybilne wstecz, jak to tylko możliwe (prawdopodobnie będzie działać nawet w IE5) i po prostu działa. Bez majstrowania przy pozycjonowaniu lub pływaniu.
Czy więc każdy może zrobić odpowiednik bez tabel?
Wymagania są następujące:
- Kompatybilny wstecz: do FF2 i IE6;
- Raczej spójne: w różnych przeglądarkach;
- Wyśrodkowany w pionie: przycisk i tytuł mają różną wysokość; i
- Elastyczny: umożliwia dość precyzyjną kontrolę nad pozycjonowaniem (wyściółką i / lub marginesem) i stylizacją.
Na marginesie, trafiłem dzisiaj na kilka interesujących artykułów:
EDYCJA: Pozwól mi rozwinąć kwestię pływaka. Tego rodzaju prace:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
Dzięki Ant P za tę overflow: hiddenczęść (nadal nie rozumiem dlaczego). Tutaj pojawia się problem. Powiedzmy, że chcę, aby tytuł i przycisk były wyśrodkowane w pionie. Jest to problematyczne, ponieważ elementy mają różną wysokość. Porównaj to z:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
który działa doskonale.
Odpowiedzi:
Nie ma nic złego w korzystaniu z dostępnych narzędzi do szybkiego i prawidłowego wykonania pracy.
W tym przypadku stół działał idealnie.
Osobiście użyłbym do tego stołu.
Uważam, że należy unikać zagnieżdżonych tabel, może się to pogmatwać.
źródło
Po prostu płyń w lewo i w prawo i ustaw, aby wyczyścić oba i gotowe. Nie ma potrzeby stołów.
Edycja: Wiem, że otrzymałem za to wiele głosów za i wierzyłem, że miałem rację. Ale są przypadki, w których po prostu potrzebujesz tabel. Możesz spróbować zrobić wszystko z CSS i będzie działać w nowoczesnych przeglądarkach, ale jeśli chcesz wspierać starsze ... Nie powtarzam się, tutaj powiązany wątek przepełnienia stosu i rant na moim blogu .
Edit2: Ponieważ starsze przeglądarki nie są już tak interesujące, używam ładowania początkowego Twittera do nowych projektów. Jest świetny dla większości potrzeb związanych z układem i korzysta z CSS.
źródło
To trochę podchwytliwe pytanie: wygląda strasznie prosto, dopóki tego nie zrobisz
Chcę na wstępie stwierdzić, że tak, centrowanie w pionie jest trudne w CSS. Kiedy ludzie publikują posty i wydaje się to nieskończone w SO, „czy możesz zrobić X w CSS”, odpowiedź prawie zawsze brzmi „tak”, a ich narzekanie wydaje się nieuzasadnione. W tym przypadku tak, ta jedna rzecz jest trudna.
Ktoś powinien po prostu zredagować całe pytanie do „czy wyśrodkowanie w pionie jest problematyczne w CSS?”.
źródło
Ruchomy tytuł w lewo, ruchomy przycisk w prawo i (oto część, której nie znałem do niedawna) - utwórz pojemnik z nich obu
{overflow:hidden}.W każdym razie powinno to uniknąć problemu z indeksem Z. Jeśli to nie działa, a naprawdę potrzebujesz obsługi IE5, skorzystaj z tabeli.
źródło
overflow:hidden.W czystym CSS, działającą odpowiedzią będzie pewnego dnia po prostu użycie
"display:table-cell". Niestety, nie działa to w obecnych przeglądarkach klasy A, więc równie dobrze możesz użyć tabeli, jeśli i tak chcesz osiągnąć ten sam wynik. Przynajmniej będziesz mieć pewność, że działa to wystarczająco daleko w przeszłość.Szczerze mówiąc, po prostu użyj stołu, jeśli jest to łatwiejsze. To nie będzie bolało.
Jeśli semantyka i dostępność elementu tabeli naprawdę mają dla Ciebie znaczenie, istnieje robocza wersja robocza, aby uczynić tabelę niesemantyczną:
http://www.w3.org/TR/wai-aria/#presentation
Myślę, że to wymaga specjalnego poza DTD XHTML 1.1, który będzie po prostu wmieszać się w cały
text/htmlvsapplication/xmldebaty, więc niech nie tam.A więc do twojego nierozwiązanego problemu CSS ...
Aby wyrównać w pionie dwa elementy na ich środku: można to zrobić na kilka różnych sposobów, z pewnym zawiłym hakerem CSS.
Jeśli możesz zmieścić się w następujących ograniczeniach, istnieje stosunkowo prosty sposób:
Następnie możesz użyć pozycjonowania bezwzględnego z ujemnymi marginesami:
Ale to nie ma sensu w większości sytuacji ... Jeśli znasz już wysokość elementów, możesz po prostu użyć pływaków i dodać wystarczający margines, aby ustawić je w razie potrzeby.
Oto kolejna metoda, która wykorzystuje linię bazową tekstu do wyrównania w pionie dwóch kolumn jako bloków wbudowanych. Wadą jest to, że musisz ustawić stałe szerokości kolumn, aby wypełnić szerokość od lewej krawędzi. Ponieważ musimy trzymać elementy zablokowane na linii bazowej tekstu, nie możemy po prostu użyć float: right dla drugiej kolumny. (Zamiast tego musimy zrobić pierwszą kolumnę na tyle szeroką, aby ją przesunąć.)
HTML: dodajemy otoki .valign wokół każdej kolumny. (Nadaj im bardziej „semantyczną” nazwę, jeśli to cię uszczęśliwi.) Te muszą być zachowane bez spacji pomiędzy nimi, bo inaczej spacje tekstowe rozsuwają je od siebie. (Wiem, że to jest do bani, ale to właśnie otrzymujesz, będąc „czystym” ze znacznikami i oddzielając je od warstwy prezentacji ... Ha!)
CSS: używamy
vertical-align:middledo wyrównania bloków do linii bazowej tekstu elementu nagłówka grupy. Różne wysokości każdego bloku pozostaną wyśrodkowane w pionie i wypchną wysokość ich pojemnika. Szerokości elementów należy obliczyć tak, aby pasowały do szerokości. Tutaj są 400 i 100, bez poziomego wypełnienia.Poprawki IE: Internet Explorer wyświetla blok inline tylko dla elementów natywnie wbudowanych (np. Span, a nie div). Ale jeśli podamy element div hasLayout, a następnie wyświetlimy go w tekście, będzie on zachowywał się tak samo, jak inline-block. Regulacja marginesów polega na naprawieniu 1 piks. Przerwy u góry (spróbuj dodać kolory tła do tytułu .group, aby zobaczyć).
źródło
W tym przypadku nie zalecałbym używania tabeli, ponieważ nie są to dane tabelaryczne; umieszczenie przycisku po prawej stronie ma charakter czysto prezentacyjny. Oto, co zrobiłbym, aby zduplikować strukturę tabeli (zmień na inny H #, aby dopasować się do miejsca w hierarchii witryny):
Jeśli chcesz, aby prawdziwe wyrównanie w pionie znajdowało się na środku (tj. Jeśli tekst zawija się, przycisk jest nadal wyrównany do środka w stosunku do obu wierszy tekstu), musisz albo zrobić tabelę, albo coś z
position: absolutemarginesami i zrobić . Możesz dodaćposition: relativedo swojego menu rozwijanego (lub, co bardziej prawdopodobne, jego element nadrzędny), aby przyciągnąć go do tego samego poziomu kolejności co przyciski, umożliwiając podbijanie go nad nimi za pomocą indeksu z, jeśli o to chodzi.Zauważ, że nie potrzebujesz
width: 100%na div, ponieważ jest to element blokowy izoom: 1sprawia, że div zachowuje się tak, jakby miał poprawkę clearfix w IE (inne przeglądarki wybierają rzeczywisty clearfix). Nie potrzebujesz również wszystkich tych dodatkowych klas, jeśli celujesz w rzeczy bardziej szczegółowo, chociaż możesz potrzebować opakowującego elementu div lub rozpiętości na przycisku, aby ułatwić pozycjonowanie.źródło
zoom: 1in.group-header, który wyzwala hasLayout i powoduje, że IE 6 zachowuje się tak samo, jakby miał aktywny element: after.Zrób podwójny float w div i użyj clearfix. http://www.webtoolkit.info/css-clearfix.html Czy masz jakieś ograniczenia dotyczące dopełnienia / marginesów?
źródło
źródło
Zdecydowałem się na Flexbox, ponieważ to znacznie ułatwiło sprawę.
Zasadniczo musisz udać się do rodzica dzieci, które chcesz wyrównać i dodać
display:box(oczywiście z prefiksem). Aby umieścić je po bokach, użyj justify-content . Przestrzeń między jest właściwą rzeczą, gdy masz elementy, które muszą być wyrównane do końca, tak jak w tym przypadku (patrz link) ...Następnie kwestia wyrównania w pionie. Ponieważ uczyniłem rodzicem dwóch elementów, chcesz wyrównać Flexbox. Teraz jest łatwy w użyciu
align-items: center.Następnie dodałem style, które chciałeś wcześniej, usunąłem pływak z tytułu i przycisku w nagłówku i dodałem wypełnienie:
Zobacz Demo
źródło
Zgadzam się, że naprawdę należy używać tabel tylko do danych tabelarycznych, z tego prostego powodu, że tabele nie są wyświetlane, dopóki nie zostaną zakończone ładowanie (bez względu na to, jak szybkie to jest; jest wolniejsze niż metoda CSS). Uważam jednak, że jest to najprostsze i najbardziej eleganckie rozwiązanie:
Funkcja przycisku i wszelkie dodatkowe szczegóły mogą być stylizowane z tej podstawowej formy. Przepraszamy za złe tagi.
źródło