“Breite: calc(100% / 3);” funktioniert nicht richtig

Lesezeit: 4 Minuten

Benutzer-Avatar
Jamie Barker

Ich habe ein 3-Spalten-Layout, das den gesamten Bildschirm ausfüllen sollte, also verwende ich in meinen Spalten:

width: calc(100% / 3);

Nehmen wir zum Beispiel an, mein Bildschirm ist 782 Pixel breit:

782 / 3 = 260,66̅

Das Problem, das ich habe, ist jedoch der Internet Explorer, wo er die Pixel auf zwei Dezimalstellen rundet (260,67).

260,67 * 3 = 782,01

Bei bestimmten Breiten verliere ich also ein 1/3 meiner Seite, wenn es darunter gewickelt wird.

Hier ist ein Beispiel:

function onResize() {
    $('ul').each(function() {
        var H = eval($(this).height() / $(this).children('li').length);
        $(this).children('li').outerHeight(H);
        $(this).children('li').css('line-height', H + 'px');
        $(this).children('li').outerWidth($(this).width());
    });
}

var timer;
$(window).resize( function() {
    timer && clearTimeout(timer);
    timer = setTimeout(onResize, 100);
});
onResize();
html {
    height:100%;
}
body {
    background:black;
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}
ul {
    width: calc(100% / 3);
    display: inline-block;
    overflow:hidden;
    margin:0;
    padding:0;
    float:left;
    height:100%;
    list-style: outside none none;
}
ul li {
    background: rgb(230,240,163);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(230,240,163,1)), color-stop(0.5, rgba(210,230,56,1)), color-stop(0.51, rgba(195,216,37,1)), to(rgba(219,240,67,1)));
    background: -webkit-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -moz-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e6f0a3", endColorstr="#dbf043",GradientType=0 );
    text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul1">
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul id="ul2">
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul id="ul3">
    <li>Test 5</li>
    <li>Test 6</li>
</ul>

Kennt jemand eine elegante Lösung für dieses Problem?

ich weiß, ich könnten benutzen width: 33.33%aber ein kleiner Teil von mir weint, weil ich weiß, dass es nicht zu 100 % passt.

  • warum nicht verwenden width: 33.33% statt der calc-Funktion?

    – Web-Tiki

    27. Mai 2015 um 10:57 Uhr


  • @web-tiki weil 33,33 * 3 = 99,99, nicht 100

    – Jamie Barker

    27. Mai 2015 um 11:00 Uhr

  • @web-tiki Firefox tut es, AFAIK.

    – Jamie Barker

    27. Mai 2015 um 11:05 Uhr

  • @web-tiki Außerdem wird diese Webseite manchmal in einen Iframe innerhalb eines anderen Bildschirms geladen, sodass sie diese kleinen Breiten haben kann.

    – Jamie Barker

    27. Mai 2015 um 11:08 Uhr

  • Was ich meine ist, dass auch auf breiten Displays die Berechnung mit 33.33% hat und Fehler kleiner als 1 Pixel (1920 * 33.33% =639.936 und 639.936 * 3 = 1919.808), was auch verhindert, dass das letzte Element in einer neuen Zeile umbricht und Ihr Problem löst. Aber Sie können die Berechnungen immer noch genauer machen width:33.333333333%.

    – Web-Tiki

    27. Mai 2015 um 11:17 Uhr


Versuchen width: calc(100% * 0.33333); um sicherzustellen, dass Float-Rundungsfehler auf Nummer sicher gehen oder width: calc((100% / 3) - 0.1px);.

  • Dadurch wird die erzeugte Breite zu sein 260.64px (am obigen Beispiel). Die Tatsache, dass es nicht so ist .66 nervt mich echt :P. Es ist auch im Grunde dasselbe wie das, was @web-tiki in einem Kommentar vorgeschlagen hat (width: 33.33%)

    – Jamie Barker

    27. Mai 2015 um 11:06 Uhr


  • Suchen Sie mathematische Perfektion oder eine funktionierende Lösung? 🙂 Derzeit gibt es (meines Wissens nach) keinen Bildschirm für Verbraucher, der sich um alles kümmert, was kleiner als 0,3 Pixel ist. Es wird erst später vom Browser gerundet?

    – Niklas Brünberg

    27. Mai 2015 um 11:10 Uhr

  • Idealerweise das Beste aus beiden Welten. Natürlich übernehme ich die Arbeit an der Perfektion, aber ich halte mich für den Moment zurück, falls jemand eine Lösung hat, nach der ich suche.

    – Jamie Barker

    27. Mai 2015 um 11:13 Uhr

  • Nur um herumzufummeln, versuchen Sie dieses hier (jsfiddle.net/NiklasBr/6wo3q40e/2), für die kein JS erforderlich ist. Ich weiß, es ist wahrscheinlich keine vollständige Lösung, aber trotzdem …

    – Niklas Brünberg

    27. Mai 2015 um 11:24 Uhr

  • Danke, aber mein JS war verdummt und ich habe die Sache mit der Zeilenhöhe hinzugefügt, nur damit ich mich besser fühle: P. Die Anzahl der LIs ist dynamisch, daher muss die Höhe mit JS generiert werden, scheint es auch calc(100vw / 3) erzeugt das gleiche Ergebnis wie calc(100% / 3) :(. Aber nette Idee!

    – Jamie Barker

    27. Mai 2015 um 11:31 Uhr

Benutzer-Avatar
Jamie Barker

2020 Antwort

Flexbox verwenden:

.container {
   width: 242px; /* /3 = 80.66̅  */
   height: 100px;
   
   display: flex;
}

.col {
  flex: 1 0 0; /* Set flex basis to 0 to force equal widths */
}

.col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}
<div class="container">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
<div>

Alte Antwort

Es scheint, dass der Vorschlag von @web-tiki mit:

width:33.33%;

ist die beste Option.

  • Flex funktioniert nur, wenn Sie nur eine Elementzeile wünschen. Wenn Sie so etwas wie col-4 von Bootstrap wollen, bei dem das vierte Element in eine neue Zeile geht, ist diese Lösung von 2020 nicht die Antwort. Die alte ist die beste Antwort.

    – Thiago Santos

    16. Dezember 2020 um 22:33 Uhr

Bessere Möglichkeit:

li {
    &:last-child {
        margin-right: -1px;
    }
}

Und Sie können verwenden: width: calc(100% / 3)

1005800cookie-check“Breite: calc(100% / 3);” funktioniert nicht richtig

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy