Uitlijnen van div-blokken naar het midden (css, div html).
In CSS zijn sommige schijnbaar eenvoudige dingen niet zo eenvoudig te doen. Eén van deze dingen is uitlijning, d.w.z. wanneer het ene element op een bepaalde manier ten opzichte van het andere moet worden gepositioneerd.
Dit artikel presenteert enkele kant-en-klare oplossingen die het werk van het horizontaal en/of verticaal centreren van elementen zullen helpen vereenvoudigen.
Let op: Onder elke oplossing staat een lijst met browsers die de versies aangeven waarin de opgegeven CSS-code werkt.
CSS - Blok centreren
1. Eén blok uitlijnen met het midden van een ander blok. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.
Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; top: 50%; -webkit-transform: vertalen(-50%, -50%); -moz-transform: vertalen(-50% , -50%); -ms-transform: vertalen(-50%, -50%); -o-transform: vertalen(-50%, -50%); ;)
- Chroom 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok vaste afmetingen.
Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; boven: 50%; /* breedte en hoogte van 2 blokken */ breedte: 500px; hoogte: 250px; /* Waarden worden bepaald afhankelijk op de grootte */ /* margin-left = - breedte / 2 */ margin-left: -250px; /* margin-top = - hoogte / 2 */ margin-top: -125px )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok afmetingen gespecificeerd in percentages.
Parent ( positie: relatief; ) .child ( positie: absoluut; /* breedte en hoogte van 2 blokken in % */ hoogte: 50%; breedte: 50%; /* Waarden worden bepaald afhankelijk van de grootte in % * / links: 25% /* (100% - breedte) / 2 */ boven: 25% /* (100% - hoogte) / 2 */ )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Horizontale uitlijning
1. Eén blokelement (weergave: blok) horizontaal uitlijnen ten opzichte van een ander (waarin het zich bevindt):
Blokkeren (marge-links: auto; marge-rechts: auto; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Lijn een lijn- (weergave: inline) of lijnblok- (weergave: inline-blok)-element horizontaal uit:
Parent (tekst uitlijnen: centreren; ) .child (weergave: inline-block; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Verticale uitlijning
1. Centreer het ene element (display: inline, display: inline-block) ten opzichte van het andere (waar het zich in bevindt) in het midden. Het bovenliggende blok in dit voorbeeld heeft een vaste hoogte, die wordt ingesteld met behulp van de CSS-eigenschap line-height.
Parent ( regelhoogte: 500px; ) .child ( weergave: inline-block; verticaal uitgelijnd: midden; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Het ene blok verticaal ten opzichte van het andere centreren door de ouder als een tabel weer te geven, en het kind als een cel van deze tabel.
Parent (weergave: tabel; ) .child (weergave: tabelcel; verticaal uitgelijnd: midden; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Als je nog andere interessante trucs of handige kant-en-klare uitlijnoplossingen kent, deel ze dan in de reacties.
In programma's als Microsoft Word ben je waarschijnlijk wel eens tools tegengekomen voor het horizontaal uitlijnen van tekst. U kunt tekst links of rechts uitlijnen, gecentreerd of uitgevuld. Hetzelfde geldt voor CSS: tekstuitlijning gebeurt met behulp van de eigenschap text-align en de bijbehorende waarden, die in de tabel worden weergegeven:
Voorbeeld van een stijlinvoer:
P (tekst uitlijnen: links; )
Waarden links, rechts en midden Links uitgelijnde tekst ziet er bijna altijd goed uit op webpagina's en is gemakkelijk te lezen. Rechtse uitlijning in Europese talen wordt in de regel zelden gebruikt, maar kan niet volledig nutteloos worden genoemd: deze stijl is handig voor het prachtig ontwerpen van bijschriften voor foto's of citaten, het uitlijnen van de inhoud van tabelcellen of kleine tekstfragmenten. De middelste waarde wordt vaak voor dezelfde doeleinden gebruikt.De justify-waarde Justify text in CSS kan worden gebruikt voor gedrukte versies van pagina's, maar het is niet aan te raden om je te laten meeslepen door deze stijl op webpagina's die zijn ontworpen voor weergave op het scherm. Waarom? Op het eerste gezicht ziet de uitgevulde tekst er mooi egaal uit, als een column in een krant. Maar om de tekst op deze manier uit te rekken, moet de browser extra ruimte tussen de woorden toevoegen, waardoor lelijke gaten in de tekst kunnen ontstaan die de leesbaarheid bemoeilijken. In programma's die zijn ontworpen om gegevens voor te bereiden voor afdrukken, is er een veel fijnere aanpassing van de spatiëring in de tekst, en wordt er ook vaak gebruik gemaakt van woordterugloop, wat in veel browsers niet aanwezig is. Daarom is het noodzakelijk om te controleren hoe gerechtvaardigde tekst er op webpagina's uitziet, en de eerste vraag die u uzelf moet stellen is: is deze gemakkelijk te lezen? Dit geldt vooral voor smalle tekstblokken (inclusief mobiele versies van pagina's).
Begin- en eindwaarden De begin- en eindwaarden voor de eigenschap text-align zijn geïmplementeerd in CSS3 en werken vrijwel hetzelfde als left en right, maar er is een verschil. Door de startwaarde toe te passen op tekst die van links naar rechts loopt (LTR), zal de uitlijning links zijn (voor tekst die van rechts naar links loopt (RTL) zal de uitlijning dienovereenkomstig rechts zijn). Het is logisch dat de eindwaarde precies andersom werkt (dat wil zeggen: LTR-tekst wordt rechts uitgelijnd en RTL-tekst links). Deze twee waarden worden niet ondersteund door sommige browsers, waaronder Internet Explorer, dus tenzij u ze absoluut nodig heeft, raden we u aan de linker- en rechterwaarden te gebruiken. 
De schermafbeeldingen tonen voorbeelden van het gebruik van verschillende waarden voor de CSS-text-align-eigenschap: 
Schermafbeelding 3: Tekst uitlijnen op breedte. Met een klein lettertype en een grote pagina-/blokbreedte lijkt deze optie voor het uitlijnen van tekst op een webpagina acceptabel. 
Screenshot 4: de lettergrootte is vergroot en de blokbreedte is verkleind vergeleken met het vorige voorbeeld. Zoals je ziet zijn er lelijke gaten ontstaan in de tekst (onderstreept met een rode lijn). 
Schermafbeelding 5: twee manieren om tekst uit te lijnen met behulp van het voorbeeld van de mobiele versie van onze tutorial (aan de linkerkant - tekst uitlijnen: links, aan de rechterkant - tekst uitlijnen: uitvullen). Probeer de tekst in beide kolommen te lezen en bepaal welke optie prettiger is om te lezen.
Heel vaak zijn mensen gewoon lui of hebben ze geen tijd om de interface van het Microsoft Word-programma te bestuderen. Daarom rijzen er vragen als "Hoe tekst in Word uitlijnen?" - Nou, laten we het uitzoeken. Wanneer u in dit programma tekst typt, wordt deze automatisch links uitgelijnd. Is het mogelijk om deze naar het midden te verplaatsen? Of aan de rechterkant? Natuurlijk ja. Bovendien kunt u een titel (documentkop) in het midden van de pagina plaatsen en de tekst zelf links uitlijnen.
Leren tekst uitlijnen in MS Word
In het gedeelte "Home" bevinden zich speciale knoppen, waarvan sommige verantwoordelijk zijn voor het uitlijnen van tekst op het midden, de linker- en rechterrand, evenals op de breedte van het document.We komen er later op terug, laten we eerst uitzoeken hoe we de tekst niet moeten uitlijnen.
Onjuiste tekstuitlijning in Word
Onervaren gebruikers beginnen vaak de tekst uit te lijnen zoals ze nodig hebben, met behulp van geïmproviseerde middelen, dat wil zeggen door extra spaties toe te voegen of op de knop "Tab" te tikken. Deze uitlijning wordt als onjuist beschouwd, omdat de afstand tot de linkerrand met het oog wordt berekend, wat erg lastig is voor het verder typen of bewerken van tekst. Bovendien is het bijna onmogelijk om met het oog de noodzakelijke inkeping te maken, waardoor sommige documenten mogelijk niet worden geaccepteerd. Dit geldt in het bijzonder voor diploma's - geen enkele leraar accepteert tekst die op deze manier wordt gedrukt - alle vereisten moeten strikt worden nageleefd, tot aan de inspringing en uitlijning toe. Bovendien is de methode zelf niet handig te noemen: je moet te veel op de probleemknoppen en Tab tikken.Als het om een diploma gaat, is dat één ding. Wat als dit een officieel document is? Met deze aanpak kunt u gemakkelijk uw bedrijfsreputatie verliezen. Daarom moet u, om tekst uit te lijnen, standaard MS Word-hulpmiddelen gebruiken: de knoppen in het gedeelte "Home".
Om de juistheid van het document te controleren, is er ook een speciale knop. Als u erop klikt, ziet u verborgen tekens. Daarom is het beter om de kwestie van de tekstopmaak vanaf het allereerste begin correct te benaderen;
Na het klikken verschijnen er vreemde tekens, veel stippen en pijlen in de tekst.
De stippen zijn de ruimtes die u invoert. Pijlen – door op de Tab-toets te drukken, de rest heeft in dit stadium geen praktische betekenis voor ons. Dus als u te veel spaties op een rij plaatst om de tekst op de gewenste manier uit te lijnen, en u op de knop 'Alle tekens weergeven' klikt, wordt uw fout onmiddellijk merkbaar: veel stippen en pijlen.
Om het document terug te brengen naar de vorige vorm, klikt u nogmaals op dezelfde knop.
Lijn tekst uit met standaard Microsoft Word-hulpmiddelen
Laten we dus terugkeren naar dezelfde vier knoppen die we eerder hebben gepresenteerd.Zoals u kunt zien, is alles uiterst eenvoudig. We haasten ons om het u naar de zin te maken, u hoeft de tekst niet opnieuw te schrijven; u kunt deze zelfs uitlijnen nadat deze is afgedrukt. Selecteer het gewenste gebied met de muis en klik op een van de knoppen.
Het lijkt erop dat er niets moeilijks is om een afbeelding of tekst in het midden van het browservenster te installeren. We gebruiken de CENTER-tag en alles gaat naar de plek die we bedoeld hebben. Niet alles is echter zo eenvoudig. Er zijn drie manieren om te centreren, elk heeft zijn eigen kenmerken en verschillen in verschillende browsers.
Een van de eenvoudigste en handigste tags, CENTER, is ontworpen om een tekstblok uit te lijnen. Deze tag kan ook worden gebruikt om figuren en tabellen te centreren. De uitzondering zijn de elementen
of
waarvoor de uitlijning wordt gespecificeerd door de eigenschappen van de IMG-tag. Dus als je een element plaatst
binnen de CENTER-tag wordt de afbeelding rechts uitgelijnd.
Voorbeeld 4.1. Centreren met de CENTER-tag
Deze tekst wordt uitgelijnd op het midden van het browservenster en het onderliggende venster
tekening op de rechterrand.
Formeel mag CENTER alleen worden gebruikt als parameter van andere bloktags (P, PRE en andere). In de Netscape Navigator 2.0-browser werd CENTER echter als een afzonderlijke tag geïntroduceerd. Deze toevoeging is ontworpen om de extra verticale ruimte te verwijderen die ontstaat bij het gebruik van bloktags. Als in plaats van de CENTER-tag de tekst in een alinea wordt geplaatst (
) , is er een extra verticale ruimte tussen de horizontale lijn en deze tekst.
CENTER maakt geen deel uit van de HTML-specificatie. In "officiële" HTML moet opmaak, zoals tekstuitlijning, worden gedaan via tagattributen (bijv.
) of met behulp van stijlen. Deze tag heeft echter bestaansrecht gekregen. Na de publicatie van de HTML 4 W3-specificatie raadde het Consortium echter af om de CENTER-tag te gebruiken en in plaats daarvan het element
Voorbeeld 4.2. Centreren met een DIV-tag
Tekst centreren met behulp van een DIV-tag
Een andere manier om te centreren is door stijlen te gebruiken. Stijlen zijn instructies waarmee u de opmaakkenmerken kunt beheren, zoals lettertype, kleur, uitlijning, enz. Een voorbeeld van het overschrijven van de P-tag om tekst te centreren.
Voorbeeld 4.3. Centreren met stijlen
Wanneer u nu de P-tag gaat gebruiken met het bovenstaande
stijl, wordt de alineatekst uitgelijnd in het midden van het browservenster
Bij lay-outtaken doen zich periodiek momenten voor waarop het nodig wordt om een lijst uit te lijnen met de breedte van het scherm. In dit geval moeten de items van deze lijst gelijkmatig worden uitgelijnd, waarbij de buitenste elementen tegen de randen van de container worden gedrukt, en de afstand ertussen moet hetzelfde zijn.
Om het duidelijker te maken waar we het over hebben, zijn hier een paar afbeeldingen.
De figuren laten zien dat bij verschillende schermresoluties de items nog steeds in de breedte uitgelijnd blijven, grenzend aan de zijwanden en de inkepingen gelijk aan elkaar maken.
In dit artikel wil ik de verschillende opties om dit probleem op te lossen nader bekijken, en ook alle goede en slechte kanten van deze methoden overwegen.
Hoe werkt dit?
Laten we, voordat we elke oplossing afzonderlijk bekijken, wat dieper ingaan op de fijne kneepjes van het mechanisme en nadenken over hoe het werkt.
In wezen moeten we begrijpen wat text-align: justify doet met tekst. Omdat het gedrag van onze blokken sterk lijkt op het resultaat van het uitlijnen van woorden op een regel met behulp van deze specifieke eigenschap. Als we wat dieper graven in hoe text-align: justify werkt, kunnen we het volgende algoritme observeren.
Fase één
Eerst wordt er gezocht naar minimale, onbreekbare ‘bouwstenen’ in een regel tekst. Dit kunnen individuele woorden in de tekst zijn, afbeeldingen, inline-blokken, inline-tabellen, enz. Over het algemeen wordt alles wat, indien nodig, als één geheel naar een nieuwe lijn overgebracht.
In cijfers 1
De afbeelding toont de gebruikelijke inline-boxen, d.w.z. gewoon tekst of inline-elementen, zoals< span> of
.
Onder het nummer 2
We hebben een inline-block-niveau-element, d.w.z. inline-block . Zoals kan worden vervangen, wordt het inspringalgoritme daarin opnieuw berekend. De reden is dat inline-block intern zijn eigen opmaakcontext genereert. Wat kan er niet gezegd worden over een regulier inline-element, waarbinnen de interwoordafstand zou worden verdeeld volgens een algemeen, extern algoritme.
In cijfers 3
De gebruikelijke afbeelding is gemarkeerd. Net als de anderen is het een element met kleine letters en gehele getallen.
Voor onze lijn zijn al deze dingen afzonderlijke entiteiten, onafscheidelijke woorden, afzonderlijke gehelen. En de afstanden daartussen worden nauwkeurig geregeld door ons mechanisme genaamd text-align: justify
*
De laatste regel valt niet onder justify , aangezien deze alleen werkt voor volledig gevulde regels, en in de laatste regel blijven de spaties altijd hun normale grootte.
Fase twee
In de tweede fase berekent het algoritme de breedte van al onze ‘stenen’ in de lijn, telt ze bij elkaar op en trekt het resulterende resultaat af van de totale breedte van de lijn zelf.
Hieruit kunnen we concluderen dat we nu de totale som van alle spaties in de regel hebben, die gelijk is aan 116px.
Fase drie - finale
De derde en laatste fase van het algoritme is het delen van het resulterende getal (in dit geval 116) door het aantal spaties in de regel (er zijn er 7 in onze regel). De breedte van één spatie wordt afgetrokken van het resultaat (16,571) en deze waarde wordt aan elk daarvan toegevoegd. Wat uiteindelijk resulteert in een gelijkmatige verdeling van de indrukking over de gehele lijn.
Kortom
Zoals we kunnen zien, is het text-align: justify-algoritme in werkelijkheid niet zo ingewikkeld, alles lijkt duidelijk en logisch. Ik ben er zeker van dat ieder van ons, als hij een soortgelijk probleem oplost, het resultaat volgens precies hetzelfde scenario zou berekenen. De enige moeilijkheid is om een goede, mooie en vooral hoogwaardige oplossing te schrijven, terwijl je een minimum aan materiaal uitgeeft. Er zijn tenslotte veel valkuilen, in de vorm van de laatste (die niet onder het algoritme valt) lijn, die verborgen moet worden, of op de een of andere manier op dezelfde manier moet worden uitgelijnd als alle andere. En natuurlijk mogen we de interpretatie van code niet vergeten, browsers zoals Opera, IE6-7, die graag voor onverwachte verrassingen zorgen.
Onze taak
Onze taak is om op basis van dit algoritme een oplossing te bouwen. Toepassen, simuleren, vervangen, doen wat je wilt, het belangrijkste is om uiteindelijk te krijgen wat we willen. Namelijk gelijkmatig uitgelijnde elementen op een rij, waarvan de zijkanten tegen hun randen worden gedrukt. En uiteraard moeten de afstanden (ruimtes) tussen de elementen absoluut hetzelfde zijn voor elke containerbreedte.
Optie 1
Het allereerste dat in mij opkwam, was een lijst van vijf items nemen, er vier gestroomlijnd maken, de laatste losmaken en over de gehele resterende breedte uitrekken. Om duidelijker te maken waar we het over hebben, geef ik de code.
De structuur zal als volgt zijn
En CSS is zo
Ul ( lettertype: 14px Verdana, Genève, schreefloos; overloop: verborgen; ) ul li ( ) ul li.left ( breedte: 20%; zwevend: links; ) ul li.right ( breedte: 20%; zwevend: rechts ; tekst uitlijnen: rechts; ul li.center ( tekst uitlijnen: centreren; ) ul li .content ( achtergrond: #E76D13; breedte: 98px; hoogte: 98px; weergave: inline-blok; tekst uitlijnen: links; rand: 1px effen #000; /* inline-blokemulatie voor IE6-7*/ //display: inline //zoom: 1;
Wat hebben we eigenlijk gedaan? En wij hebben het volgende gedaan. We hebben de twee linker- en twee rechterpunten op verschillende kanten verspreid met behulp van respectievelijk float: left en float: right, terwijl we ze elk 20% van de breedte toewezen, wat in totaal 80% van de gehele breedte van de container opleverde. Ik besloot het laatste punt niet gestroomlijnd te maken, omdat de inhoud zelf alle resterende ruimte na de float-blokken in beslag neemt.
Dienovereenkomstig moesten we voor een dergelijke oplossing markup opofferen, of beter gezegd extra klassen + interne containers voor inhoud. Zoals je misschien hebt gemerkt, heb ik elk van deze containers inline-block gemaakt door er display: inline-block aan toe te wijzen, waardoor mijn inhoud in elke richting kon worden uitgelijnd met behulp van text-align op de ouder. Deze ‘opofferingen’ kunnen nauwelijks als een goede beslissing worden beschouwd, als er geen enkele belangrijke ‘maren’ zijn.
Ten eerste hebben, zoals te zien is op de screenshots, alleen de zij-items uniforme inkepingen en is er een duidelijk verschil tussen het midden en de rest. En hoe breder de container, hoe opvallender dit wordt.
Ten tweede heb ik, om te experimenteren, een breedte van 200px aan het tweede item toegewezen.
En het tweede element verscheen onmiddellijk onder het derde. Natuurlijk zou het mogelijk zijn om een minimale breedte voor de container in te stellen en dit zou niet gebeuren, maar kan deze actie als een excuus of een oplossing worden beschouwd? Natuurlijk niet! Ik wil dat onze punten elke breedte kunnen hebben en dat ons algoritme tegelijkertijd perfect werkt.
En ten derde maakten al deze extra wrappers, klassen, berekening van het aantal elementen, hun breedte en de breedte van de container een absoluut einde aan deze optie, waardoor we verder moesten gaan, op zoek naar een echte oplossing.
Ik plaats deze optie zodat iedereen deze kan beoordelen en door kan gaan naar de volgende methode.
Optie 2
De tweede optie lijkt op de eerste, maar slechts gedeeltelijk. Feit is dat we er slechts één links uitlijnen, het linkerblok, en de rest bevindt zich al in hun eigen container. Maar laten we van woorden naar daden gaan.
-
1
-
-
2
-
3
-
4
-
5
-
Als u zegt dat we in deze situatie feitelijk twee verschillende kolommen hebben, dan heeft u volkomen gelijk. Onze structuur is tenslotte in twee delen verdeeld, waarvan het linker een container is met één blok en het rechter de rest bevat. Het ziet er ongeveer zo uit:
De linkerkolom is tegen de linkerrand gedrukt en bevat het allereerste, enkele blok. Dit is nodig zodat de rechterkant strak op de rechterkant wordt gedrukt en zich uitstrekt tot de gehele resterende ruimte. Het uitrekken van de rechterkant gebeurt dankzij overflow: verborgen , dat zijn eigen opmaakcontext creëert, d.w.z. in wezen zijn eigen, onafhankelijke container. Voor alle onderliggende elementen van deze container is de breedte 100% en daarom strekken we de blokken erin uit in overeenstemming met deze regel. Vier blokken hebben een breedte van 25%, wat neerkomt op 100. In de afbeelding kun je zien hoe deze blokken zijn gerangschikt. Je kunt zien dat de inline blokelementen met inhoud erin naar rechts zijn uitgelijnd met behulp van text-align: right , waardoor het meest rechtse blok tegen de zijwand wordt gedrukt, net als het linkerblok.
Dankzij dergelijke "opofferingen" met twee kolommen hebben we een uitstekend resultaat behaald, en zoals te zien is op de eerste foto's blijft de afstand tussen de blokken bij verschillende resoluties absoluut hetzelfde. Dit gebeurt vanwege gelijkwaardige blokken aan de rechterkant. De breedte van elk ervan is 25% en het element erin is 100px. Dit geeft gelijke ruimte aan de linkerkant van elke "steen" afzonderlijk.
Op dit moment kunnen we gerust zeggen dat we met een vaste blokbreedte precies hebben gekregen wat we wilden.
Maar het is nog steeds interessant om te weten wat er zal gebeuren als we eerst de breedte van het eerste blok veranderen, en dan van een willekeurig blok aan de rechterkant. Laten we eerst de linker instellen... nou ja, laten we zeggen 150px.
Ul li.one .content (breedte: 150px;)
Alles is geweldig! Tot nu toe werkt hetzelfde idee met de juiste, onafhankelijke container. Laten we nu onze breedte verplaatsen naar het eerste blok aan de rechterkant.
Eh, maar dit experiment mislukte. De rechtermarge van het meest linkse blok bleek kleiner dan alle andere. Alles wordt gemakkelijk verklaard door het feit dat de inhoud van het eerste element aan de rechterkant 50px groter werd, en omdat het aan de rechterkant is uitgelijnd, werd de breedte visueel toegevoegd aan de linkerkant en dienovereenkomstig begon te verschillen van de breedte van aangrenzende blokken. Nou ja, natuurlijk veranderde de inspringing, die precies 50px kleiner werd.
Uit dit alles kunnen we concluderen dat deze methode duidelijk beter is dan zijn voorganger en dat deze recht op leven heeft. Het enige nadeel is dat we geen verschillende breedtes voor de blokken kunnen instellen en hetzelfde moeten blijven. Dus als u een lijst heeft waarin alle items dezelfde breedte hebben, kunt u deze aanpak gebruiken. Je moet natuurlijk begrijpen dat je niet zonder een structuur met twee kolommen kunt + je hebt een verplichte minimale breedte voor de container nodig (min-breedte), anders zullen de blokken elkaar bij een kleine schermbreedte overlappen.
*
Trouwens, in mijn voorbeeld gebruikte ik in de rechter container vier blokken van elk 25%, en hun totale hoeveelheid was 100%. Daarom moet u onthouden dat als er bijvoorbeeld zes blokken zijn, de breedte van elk blok gelijk is aan 16,666, wat fractionele percentages aangeeft, die bijvoorbeeld niet worden ondersteund in de Opera-browser.
Dienovereenkomstig zal het resultaat in dit geval enigszins afwijken van wat u zou willen.
Optie 3 - tekst uitlijnen: uitvullen
Het is vermeldenswaard dat we tot nu toe, in geen enkel voorbeeld, nooit text-align: justify hebben gebruikt, ook al zijn al onze oplossingen gebaseerd op het algoritme ervan. Ik stel voor om deze traditie te doorbreken en dit beest eindelijk in actie te brengen.
In het eerste deel van het artikel kwamen we erachter dat text-align: justify van invloed is op alle regels behalve de laatste, wat betekent dat we onze lijst moeten samenstellen, rekening houdend met dit gedrag, door een extra, hulpelement toe te voegen aan het einde van de regel. menu.
Ul ( lettertype: 14px Verdana, Genève, schreefloos; tekst uitlijnen: uitvullen; ) ul li ( achtergrond: #E76D13; breedte: 98px; hoogte: 98px; weergave: inline-block; tekst uitlijnen: links; rand: 1px solid #000; /* inline-block-emulatie voor IE6-7*/ //display: inline; //zoom: 1; ul li.helper (breedte: 100%; hoogte: 0; zichtbaarheid: verborgen; )
Uit de code blijkt duidelijk dat we een lijst hebben gemaakt met vijf hoofdelementen en één helperelement. text-align: uitvullen op het hoofdelement ( ul), dwingt zijn nakomelingen om zijn algoritme te gehoorzamen. Zoals u weet werkt deze eigenschap immers met tekst, en aangezien onze inline-block (weergave: inline-block) items in wezen doorlopende woorden op een regel zijn, is dit gedrag heel natuurlijk. Het is trouwens de moeite waard om te overwegen dat text-align: justify een erfelijke eigenschap is, dus text-align: left op directe afstammelingen is een noodzakelijke maatregel. Door dit te doen, lijken we de uitlijning van de inhoud van onze blokken terug te brengen naar hun vorige staat.
In het eerste deel van het artikel zei ik dat ons algoritme niet van toepassing is op de laatste regel, maar werkt met alle regels behalve deze. Dus voegde ik aan het einde nog een element toe, een dummy, en strekte het uit tot 100% breedte, waardoor het uitrekte tot de allerlaatste regel in de lijst. Met behulp van eenvoudige technieken (hoogte: 0, zichtbaarheid: verborgen) kan ik bijna zeggen dat ik het heb verborgen. Waarom zei ik 'bijna'? Hierover later meer. Laten we eerst eens kijken naar wat we bedacht hebben.
Het eerste dat opvalt is dat ons algoritme voor verschillende breedtes werkt zoals het hoort. Bij punten van dezelfde breedte blijft de afstand ertussen hetzelfde, wat goed nieuws is. Maar het is nog steeds interessant om te weten of alles net zo goed zal zijn met verschillende blokbreedtes. Laten we klassen aan een aantal items toewijzen en dit controleren.
Laten we onze eigen regels voor hen toevoegen.
Eerste (breedte: 150px;).derde (breedte: 200px;)
Laten we het controleren.
Ik heb specifiek de breedte van het scherm vergroot, zodat wanneer de breedte klein is, de blokken niet naar een andere regel springen, zoals gewone woorden in tekst. Maar als je naar de resultaten van het algoritme kijkt, werkt het! De ruimtes tussen de elementen blijven gelijk, ook al hebben we van twee ervan de breedte vergroot.
Die. we kunnen gemakkelijk zeggen dat deze methode, met een extra element aan het eind, een uitstekend resultaat oplevert en als we de schermbreedte beperken, zal de toepassing ervan in de praktijk ons niet teleurstellen.
Dus nu is het misschien tijd om een vlieg in de zalf toe te voegen.
Ten eerste heb ik, zoals je misschien hebt gemerkt, in alle voorbeelden alle browsers vermeld behalve IE6-7.
Ten tweede, zoals je waarschijnlijk op de foto's kunt zien, zijn er onderaan onze regel, waar het extra element zit, grote, onbegrijpelijke inkepingen.
Laten we het in volgorde regelen.
Eerste probleem is een IE6-7-probleem. Zonder screenshots te verstrekken, zal ik meteen zeggen dat onze methode daar niet werkt. De items in deze browsers zijn dicht bij elkaar gedrukt en strekken zich niet uit in een lijn. Feit is dat de IE6-7-parser de sluittags op elementen volledig negeert
Om dit probleem op te lossen gaan we naar de hoogste berg... MSDN. Hmmm... iets vinden op deze site is erg moeilijk. Maar na een tijdje rommelen was er een oplossing gevonden! text-justify: krant - eigenschap voor het vergroten of verkleinen van de afstand tussen letters en tussen woorden. MSDN beweert dat dit ding "de meest geavanceerde vorm van uitlijning voor het Latijnse alfabet" is, maar in dit artikel staat ook een toevoeging dat deze eigenschap voor Arabische teksten de letters zelf verlengt.
Geweldig, we hebben gewoon zoiets als dit nodig. Laten we hun woorden in werkelijkheid controleren.
Ul ( lettertype: 14px Verdana, Genève, schreefloos; tekst uitlijnen: uitvullen; /* Geneeskunde voor IE6-7*/ tekst uitvullen: krant; ) ul li ( achtergrond: #E76D13; breedte: 98px; hoogte: 98px ; weergave: inline-blok; tekstuitlijning: linkerrand: 1px effen #000;* inline-blokemulatie voor IE6-7*/ //weergave: inline: 100% zichtbaarheid; : verborgen; .eerste(breedte: 150px;).derde(breedte: 200px;)
En hier is het resultaat.
Overwinning! IE6-7 werden verslagen door hun eigen wapens. Geweldig. Nu werkt onze methode perfect in alle browsers, te beginnen met IE6. Het blijkt dat MSDN niet teleurstelde en hun woorden werden in de praktijk bevestigd. Dus tekst uitlijnen: rechtvaardigen heeft ons geholpen, dus laten we er nota van nemen en verder gaan met het oplossen van het tweede probleem.
Tweede probleem wordt geassocieerd met een onbegrijpelijk streepje tussen de onderkant van de lijst en onze regel met elementen. Wat is er aan de hand? Maar het feit is dat alles heel natuurlijk is en deze vreemde inkepingen zijn niemand minder dan regelafstand(lijnhoogte) en lettergrootte(lettergrootte), die a priori aanwezig zijn voor regels en letters in de tekst. Onze elementen zijn alleen blok aan de binnenkant en inline aan de buitenkant, dus vallen onder deze regels.
Wat moet ik doen? Het is gemakkelijk! We kunnen deze stijlen op de container op nul zetten en ze vervolgens voor afstammelingen herstellen naar hun vorige staat. Laten we het proberen.
Ul ( lettertype: 14px Verdana, Genève, schreefloos; tekstuitlijning: uitvullen; /* Nul voor ouder*/ regelhoogte: 0; lettergrootte: 1px; /* 1px voor Opera */ /* Cure voor IE6 -7*/ tekst uitvullen: krant; ) ul li ( achtergrond: #E76D13; breedte: 98px; hoogte: 98px; weergave: inline-block; tekst uitlijnen: links; rand: 1px effen #000; /* Herstellen y afstammelingen, behalve de laatste */ line-height: normal; font-size: 14px; /* Zonder dit zal Opera een inspringing hebben onder de elementen */ vertical-align: top /* inline-block-emulatie voor IE6- 7 */ // weergave: inline; //zoom: 1; ul li.helper ( breedte: 100%; hoogte: 0px; zichtbaarheid: verborgen; overloop: verborgen; ) .first ( breedte: 150px;). breedte: 200px;)
Resultaat.
Vóór het op nul zetten
Na het resetten
Geweldig! Alles is gelukt. Het resetten van de stijlen van de hoofdcontainer naar nul heeft ons geholpen. Het enige dat we nu moeten onthouden, is dat we vanwege het op nul zetten van de lettergrootte onze items niet kunnen instellen op een lettertype in lengte-eenheden zoals em, evenals % voor zal niet het gewenste resultaat opleveren. Maar over het algemeen werkt onze methode perfect, dus we kunnen de resultaten samenvatten en verder gaan, want één oplossing is niet genoeg voor ons, we hebben meer en beter nodig, toch?
Als ik de tussentijdse resultaten samenvat, wil ik zeggen dat deze aanpak tot nu toe de leider is onder de oplossingen die tot nu toe zijn gepresenteerd, en dat ik er persoonlijk geen enkele fout in zie, behalve... Behalve het extra element aan de einde van de regel, plus, naar mijn mening, irrelevante problemen met % en em. Maar deze krappe nadelen kunnen op geen enkele manier een reden zijn om de gepresenteerde optie af te wijzen. Laten we dus naar het resultaat kijken en verder gaan.
Optie 4 - Het extra element verwijderen
In de vorige versie gebruikten we voor ons doel een extra element, door dit aan het einde van de lijst te plaatsen. Aan de ene kant wierp deze manoeuvre natuurlijk zijn vruchten af, maar aan de andere kant... maar aan de andere kant zorgde het voor wat ongemakken. Wanneer u bijvoorbeeld items dynamisch toevoegt, zal het hulpblok alleen maar in de weg zitten, en dan bederft deze "staart" onze structuur, waardoor deze verstopt raakt. Bij deze optie raad ik aan om er vanaf te komen zonder de oplossing te verpesten.
CSS2.1 kent al heel lang zaken als pseudo-elementen. Dit zijn abstracte entiteiten die door een bepaald element kunnen worden gegenereerd en in het begin of einde ervan kunnen worden ingevoegd. Waarom vervangen we ons extra hulpblok niet door zo’n pseudo-element? Laten we proberen...
Ul ( lettertype: 14px Verdana, Genève, schreefloos; tekstuitlijning: uitvullen; /* Nul voor ouder*/ regelhoogte: 0; lettergrootte: 1px; /* 1px voor Opera */ /* Cure voor IE6 -7*/ tekst uitvullen: krant; zoom:1; ul:after ( breedte: 100%; hoogte: 0; zichtbaarheid: verborgen; overloop: verborgen; inhoud: ""; weergave: inline-blok; ) ul li (achtergrond: #E76D13; breedte: 98px; hoogte: 98px; weergave: inline-block; tekst-uitlijning: links; rand: 1px effen #000; /* Herstellen van onderliggende elementen, behalve de laatste */ line-height: normaal ; font -size: 14px; /* Zonder dit zal Opera een inspringing hebben onder de elementen */ verticaal uitlijnen: top;* inline-block-emulatie voor IE6-7 */ //display: inline;
In deze situatie hebben we het pseudo-element: daarna gebruikt dat we aan het einde van onze lijst hebben gegenereerd. Door het op dezelfde waarden in te stellen als het vorige hulpblok, deden we in wezen hetzelfde, maar zonder in de markup te komen. Die. creëerde hetzelfde, lege, maar nuttige element. En hier zijn de resultaten.
Geweldig! De pseudo-elemententruc werkte. Nu is onze markup schoon, netjes en zonder onnodige “rommel”. We zijn erin geslaagd om het extra element te verwijderen en het volledig te vervangen door het gegenereerde element.
Maar zoals gewoonlijk waren er enkele avonturen in IE6-7. Helaas ondersteunen IE6-7-browsers:after en:before niet. En als er geen ondersteuning is, zijn er geen hulpblokken, wat betekent dat er simpelweg niets uit te rekken is. Daarom is het beeld in deze browsers als volgt.
Zoals je in de schermafbeelding kunt zien, negeert IE6-7 de ruimtes tussen blokken volledig en drukt ze dicht bij elkaar. Ook al hebben we al zwaar geschut ingezet in de vorm van tekstverantwoording: krant. Waarom gebeurt dit? Laten we het uitzoeken.
Het blijkt dat het hele punt is dat de tekst gerechtvaardigd is: de krant geeft alleen maar mogelijkheid strek onze letters uit (inline-block), maar niet team. Simpel gezegd, het vertelt een string hoe deze uitgerekt wil worden, en de tekst wordt uitgelijnd: rechtvaardigen is de uitrekkracht. Die. text-align: justify is verantwoordelijk voor het uitrekken van de lijn, en text-justify: de krant specificeert alleen hoe dit uitrekken precies zal gebeuren.
Ja, maar dan rijst de vraag: “Als er zowel de mogelijkheid als de kracht is die deze kan vervullen, waarom gebeurt er dan niets?” Het antwoord ligt in de tekstuitlijning: rechtvaardig de eigenschap zelf. Weet je nog, bij de bespreking van zijn algoritme heb ik gezegd dat het zich niet uitstrekt tot de laatste regel van de tekst. En aangezien we het hulpelement aan het einde van de lijst hebben verwijderd, werd onze regel (zelfs als er maar één is) met blokken dienovereenkomstig de laatste, en daarom weigerde het algoritme ermee te werken.
Hoe kan dit? Is er een uitweg?
Gelukkig is de wereld niet zonder vriendelijke mensen, en zo’n vriendelijk persoon heeft mij op het goede pad gestuurd. Het bleek dat de oplossing vlak onder mijn neus lag. text-align-last is een eigenschap die het text-align: justify-algoritme op de allerlaatste tekstregel inschakelt als dezelfde text-align: justify erop wordt toegepast. Simpel gezegd, als we de gebruikelijke tekstuitlijning toepassen: uitvullen op tekst, dan vertelt text-align-last de eerste dat hij iets slechts doet en dat hij nu ook aan de laatste regel moet werken.
Het meest interessante is dat wordt aangenomen dat deze eigenschap specifiek gericht is op Internet Explorer, waarin we deze precies nodig hebben). Over het algemeen is het tijd om aan de slag te gaan.
Ul ( lettertype: 14px Verdana, Genève, schreefloos; tekstuitlijning: uitvullen; /* Nul voor ouder*/ regelhoogte: 0; lettergrootte: 1px; /* 1px voor Opera */ /* Cure voor IE6 -7*/ text-justify: krant; zoom:1; /* Neem de laatste regel op in het werk */ text-align-last: justify ) ul:after ( breedte: 100%; hoogte: 0px; zichtbaarheid: verborgen ; overflow: verborgen; inhoud: ""; weergave: inline-block; ul li (achtergrond: #E76D13; breedte: 98px; hoogte: 98px; weergave: inline-block; tekst-uitlijning: links; rand: 1px effen #000 ; /* Herstel de nakomelingen, behalve de laatste */ line-height: normal; font-size: 14px;* Zonder dit zal Opera een inspringing hebben onder de elementen */ verticaal uitlijnen: top; -blokemulatie voor IE6-7 */ //display: inline; //zoom: 1);
Ja! Wij hebben het gedaan. text-align-last: justify deed wat het moest doen en deed het met 5 punten. Het algoritme begon te werken op onze laatste en enige regel. Laten we dus de overwinning vieren en de resultaten van deze methode samenvatten.
Nou, ik ben tevreden. Ik ben blij dat we erin zijn geslaagd een werkelijk waardevolle oplossing te vinden. En het is niet eenvoudig om alles te vinden, maar om alles te begrijpen en het tot absolute cross-browser compatibiliteit te brengen, met een minimum aan code en zonder de markup te verstoppen. Er zijn alleen maar voordelen, maar hoe zit het met de nadelen? Wat mij betreft, die bestaan simpelweg niet. Vergeleken met de vorige versie hebben we in deze versie alleen maar de resultaten verbeterd. Tenzij...
Het enige dat de moeite waard is om te onthouden is dat we, vanwege het op nul zetten van de lettergrootte, onze items niet kunnen instellen op een lettertype in lengte-eenheden zoals em, en ook niet op % voor
zal niet het gewenste resultaat opleveren.
Maar nogmaals, deze 'nadelen' kunnen nauwelijks zo worden genoemd. Hun irrelevantie is dat je ze praktisch kunt vergeten als het niet belangrijk is.
Over het geheel genomen is de oplossing dus uitstekend, betrouwbaar en van zeer hoge kwaliteit.
Cv
In dit artikel hebben we niet alleen gekeken naar methoden die ons kunnen helpen blokken gelijkmatig in de breedte uit te lijnen, maar hebben we ook tot in detail de werkingsmechanismen onderzocht van alle eigenschappen en onderdelen die bij het proces betrokken zijn. Dit alles is belangrijk voor het begrijpen van de dingen waarmee we te maken hebben. Daarom raad ik ten zeerste aan het artikel opnieuw te lezen, en meer dan eens.
Ik ben ongelooflijk blij dat we ons doel hebben bereikt en een waardige en hoogwaardige oplossing hebben gevonden.
