In tegenstelling tot zijn tegenhanger HTML is CSS een taal die wordt gebruikt door ontwerpers maken het visuele uiterlijk van een webpagina. Float is een eigenschap binnen CSS waarmee wordt gedefinieerd hoe elementen in uw layout worden geplaatst en wordt meestal gebruikt binnen een div-tag. Bijvoorbeeld, u kunt "float: left" om een lijst van links die worden weergegeven naast de inhoud hoofdtekstgebied van een twee-kolom lay-out te maken. Wanneer de eigenschap float aan een element aan de stroom van inhoud toewijst, is het gebruikelijk dat de meest rechtse container "wrap" of laten vallen onder de eerste als andere eigenschappen binnen het element stijl niet correct zijn gedefinieerd.
Controleer uw ID of klasse-instructie in uw CSS-bestand voor een "duidelijk" eigenschap. Deze eigenschap zal dwingen het element te laten vallen onder de elementen erboven. Als u niet dat het element wilt wilt laten teruglopen, moet duidelijk worden verwijderd. Een voorbeeld van hoe dit eruit zou kunnen zien als volgt:
element1 {}Clear: both;
float: links;
}
Controleer of beide van de elementen bedoeld om naast elkaar te zitten de dezelfde eigenschap float. In een twee-kolom lay-out, beide elementen gebruikt voor het maken van kolommen met inhoud dient te hebben de "float: links;" eigenschap.
element1 {}float: links;
}
element2 {}float: links;
}
Plaats beide floated elementen binnen een div-element voor een 'container' met een vast ingestelde minimale breedte gedefinieerd of die groter is dan de som van de floated elementen en opvulling of marge. Als drijvers ingesteld op een specifieke breedte niet over voldoende ruimte om te zitten naast elkaar beschikt, zal de rechter float gedwongen worden naar beneden.
CSS:
container {min-breedte: 100px; width: auto! belangrijk; breedte: 100px;} element1 {}float: links;
padding: 10px;
breedte: 210px;
}
element2 {}float: links;
padding: 10px;
marge-rechts: 20px;
breedte: 580px;
}
HTML:
Zorg ervoor dat de inhoud van uw floated elementen niet breder zijn dan de elementen zelf of de container. De inhoud moet passen binnen het element wordt ingedrukt of verpakt te voorkomen. Bijvoorbeeld, als de ruimte voor uw rechter kolom inhoud is slechts 580 pixels, maar er is een 10 pixels opvulling en 20-pixel rechtermarge, overschrijden een onderliggend element of afbeelding niet 540 pixels in de breedte.
Probeer met behulp van de "display: blokkeren;" eigenschap als de elementen blijven teruglopen en u weet zeker dat de inhoud is niet het probleem. Dit zorgt ervoor dat het element dat moet worden behandeld als een geheel en is de meest effectieve op tekstelementen zoals navigatielinks.
Toevoegen "display: inline" aan drijvers waarin u een marge ingesteld hebt. Internet Explorer zal verdubbelen elk marges geheel in dezelfde richting als de float, waardoor de tekstterugloop.
- Toevoegen "duidelijk: beide;" aan het element-ID of de klasse te dwingen een element wilt laten teruglopen hieronder dreef elementen, zoals een voettekst div.
- Gebruik de eigenschap van de count cross-browser compatibel kolom bij het werken met tekst in plaats van afzonderlijke elementen van de dreef. Bijvoorbeeld:
- .drie-kolommen {}
- -moz-kolom tellen: 3;
- -moz-kolom-gap: 50px;
- -webkit-kolom tellen: 3;
- -webkit-kolom-gap: 50px;
- }
- Onderopvulling op primaire dreef elementen in plaats van een ondermarge gebruiken als u van plan bent om meer dreef elementen erin te plaatsen.
