Ik heb een lay-out waarin ik 3 kolommen heb.
Daarom deel ik 100% door 3.
Het resultaat is duidelijk 33.333….
Mijn doel isperfect 1/3 van het scherm.
Vraag:
Hoeveel getallen na punt kan CSS verwerken om 1/3 van de breedte te specificeren?
bijv. 33.33333
(n=5)
← hoeveel n
kan css verwerken
HTML:
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
CSS:
#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
Is er een betere manier om te delen door 3?
Antwoord 1, autoriteit 100%
Omdat het 2018 is, gebruikt u flexbox– nee meer inline-block
witruimteproblemen:
Antwoord 2, autoriteit 23%
Een perfecte 1/3 kan niet bestaan in CSS met volledige ondersteuning voor meerdere browsers (alles onder IE9). Persoonlijk zou ik het volgende doen: (Het is niet de perfecte oplossing, maar het is ongeveer net zo goed als voor alle browsers)
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
Antwoord 3, autoriteit 20%
Hoe zit het met het gebruik van het CSS3 flex-model:
HTML-code:
<div id="wrapper">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
</div>
CSS-code:
*{
margin:0;
padding:0;
}
#wrapper{
display:-webkit-flex;
-webkit-justify-content:center;
display:flex;
justify-content:center;
}
#wrapper div{
-webkit-flex:1;
flex:1;
border:thin solid #777;
}
Antwoord 4, autoriteit 8%
Met deze vioolkun je spelen met de width
van elke div. Ik heb het zowel in Chrome als in IE geprobeerd en ik merk een verschil in breedte tussen 33%
en 33.3%
. Ik merk ook een heel klein verschil tussen 33.3%
en 33.33%
. Verder merk ik geen verschil.
Het verschil tussen 33.33%
en de theoretische 33.333...%
is slechts 0.00333...%
.
Voor de argumenten, stel dat mijn schermbreedte 1960px
is; een vrij hoge maar veel voorkomende resolutie. Het verschil tussen deze twee breedtes is nog steeds slechts 0.065333...px
.
Dus meer dan twee cijfers achter de komma is het verschil in precisie verwaarloosbaar.
Antwoord 5, autoriteit 7%
.selector{width:calc(100% / 3);}
Antwoord 6, autoriteit 6%
Voor het geval je je afvraagt: in het Bootstrapsjabloonsysteem (wat erg nauwkeurig is), is hier hoe ze de kolommen verdelen wanneer u de klasse .col-md-4 toepast (1/3 van het 12-kolomssysteem)
CSS
.col-md-4{
float: left;
width: 33.33333333%;
}
Ik ben geen fan van float, maar als je echt wilt dat je element perfect 1/3 van je pagina is, dan heb je geen keus, want soms kan de browser overwegen wanneer je een inline-block-element gebruikt spatie in uw HTML als een 1px-ruimte die uw perfecte 1/3 zou breken. Ik hoop dat het heeft geholpen!
Antwoord 7, autoriteit 4%
Voor het geval iemand nog steeds op zoek is naar het antwoord,
laat de browser daarvoor zorgen. Probeer dit:
display: table
op het containerelement.display: table-cell
op de onderliggende elementen.
De browser verdeelt het gelijkmatig, of je nu 3 of 10 kolommen hebt.
BEWERKEN
het containerelement moet ook het volgende hebben: table-layout: fixed
anders bepaalt de browser de breedte van elk element (meestal niet zo erg).
Antwoord 8, autoriteit 2%
Gewoon om een alternatieve manier te presenteren om dit probleem op te lossen (als u niet echt geïnteresseerd bent in het ondersteunen van IE):
Een zachte gecodeerde oplossing zou zijn om display: table
(geen ondersteuning in IE7) te gebruiken samen met table-layout: fixed
(om kolommen van gelijke breedte te garanderen).
Lees hier hiermeer over.
Antwoord 9, autoriteit 2%
Ik heb ontdekt dat soms 6 decimalennodig zijn (tenminste in Chrome) voor 1/3 om een perfect resultaat te geven.
Bijvoorbeeld 1140px / 3 = 380px
Als u drie elementen in de 1140-container had, moeten deze een breedte hebben van 33,333333% voordat de controletool van Chrome laat zien dat ze 380px zijn. Een kleiner aantal decimalen en Chrome retourneert een kleinere breedte van 379.XXXpx
Antwoord 10, autoriteit 2%
Update 2018
Dit is de methode die ik gebruik width: 33%;
width: calc(33.33% - 20px);
De eerste 33% is voor browsers die calc() binnenin niet ondersteunen de eigenschap width, de tweede moet door de leverancier worden voorafgegaan door -webkit- en -moz- voor de best mogelijke ondersteuning voor meerdere browsers.
#c1, #c2, #c3 {
margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights
width: 33%; //fallback for browsers not supporting calc() in the width property
width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side.
width: -moz-calc(33.33% - 20px);
width: calc(33.33% - 20px);
}
tl;dr-account voor uw marge
Antwoord 11
Ik denk niet dat je het in CSS kunt doen, maar je kunt een pixel-perfecte breedte berekenen met javascript. Stel dat u jQuery gebruikt:
HTML-code:
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
JS-code:
$(function(){
var total = $("#container").width();
$("#col1").css({width: Math.round(total/3)+"px"});
$("#col2").css({width: Math.round(total/3)+"px"});
$("#col3").css({width: Math.round(total/3)+"px"});
});