calc() funktioniert nicht richtig mit komplexen Berechnungen

Ich weiß, dass dieses Thema viele Male gepostet wurde, aber ich kann keine Antwort auf meine Frage zu calc() Funktion finden. Ich kenne das Problem mit Abstand zwischen + und -, aber diesmal ist das Problem nicht damit verbunden.calc() funktioniert nicht richtig mit komplexen Berechnungen

Ich kann nicht richtig 3 Bilder in einer Reihe angezeigt werden
width: calc((100% - 20px)/3);

Das letzte Bild verwenden, sollte in der gleichen Reihe angeordnet werden, aber es ist nach unten bewegt. Es hat margin-right: 0 so Ausdruck calc((100% - 20px)/3) sollte diese drei img in einer Reihe nebeneinander halten.

komplette Code

* { margin: 0; padding: 0; background: red;} 
 

 
img { 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: calc((100% - 20px)/3); 
 
    
 
    &.last { margin-right: 0; } 
 
}

<!-- images should be displayed 
 
     - in a row 
 
     - with margin right 20px except last 
 
-------------------------------------------> 
 

 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

Quelle

2016-06-01 rafr3

Breite: calc ((100% - 40 Pixel)/3); sollte anstelle von 20px verwendet werden. seit 1. und 2. Element Rand 20px + 20px; Stellen Sie sicher, dass der Rand rechts auf das letzte Element angewendet wird. –

Das 'calc' ist gültig und Sie können dies selbst überprüfen:' CSS.supports ("width", "calc ((100% - 20px)/3)") 'returns' true', das hat natürlich nichts mit fehlenden Leerzeichen um Operatoren zu tun. – Xufox

Es sollte 40px statt 20px sein.

Sie haben 3 Bilder mit margin-right: 20px jeder außer dem letzten. So wird es (3 * 20) sein - 20 = 40

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: red; 
 
} 
 
img { 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: calc((100% - 40px)/3); 
 
} 
 
img.last { 
 
    margin-right: 0; 
 
}

<!-- images should be displayed 
 
     - in a row 
 
     - with margin right 20px except last 
 
-------------------------------------------> 
 

 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

Quelle

2016-06-01 09:43:42 Pugazh

Es wäre es wert, zu erklären, dass die '- 40px' die ersten beiden Elemente richtige Ränder, nur geben Arbeitscode hilft, aber er wird nicht lernen, was schief gelaufen ist. – DBS

Verwenden Sie die folgende Lösung:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: red; 
 
} 
 
img { 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: calc((100% - (20px * 2))/3); 
 
} 
 
.row3 img { 
 
    width: calc((100% - (20px * 2))/3); 
 
} 
 
.row5 img { 
 
    width: calc((100% - (20px * 4))/5); 
 
} 
 
img.last { 
 
    margin-right:0; 
 
}

<!-- example original --> 
 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 

 
<!-- example 3 images --> 
 
<div class="row3"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
</div> 
 

 
<!-- example 5 images --> 
 
<div class="row5"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
    <img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
</div>

Die Formel berechne die Bildbreite von e sehr Bild im Behälter:

calc(([width-of-container] - ([margin-lr-images] * [count-images - 1]))/[count-images])

Quelle

2016-06-01 09:45:11

Er braucht, dass der letzte nicht "margin-right" hat. –

Da es 2 Bilder mit margin-right: 20px, soll die Breite der Linie 100% - 40px dann durch 3 (20 Pixel x 2) unterteilt werden.

Bitte siehe unten überarbeiteten Code - Ich habe auch die .last Klasse korrigiert, so dass es mit normalen CSS rendert.

* { margin: 0; padding: 0; background: red;} 
 

 
img { 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: calc((100% - 40px)/3); 
 
} 
 
img.last { margin-right: 0; }

<!-- images should be displayed 
 
     - in a row 
 
     - with margin right 20px except last 
 
-------------------------------------------> 
 

 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"> 
 
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

Quelle

2016-06-01 09:47:14

calc() funktioniert nicht richtig mit komplexen Berechnungen

Antwort

Verwandte Themen