css verdeel breedte 100% in 3 kolommen

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 nkan 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-blockwitruimteproblemen:

Codefragment weergeven


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 widthvan 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 1960pxis; 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: tableop het containerelement.
  • display: table-cellop 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: fixedanders 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"});
});

Other episodes