複雑な計算でcalc（）が正しく機能しない

Question

このトピックは何度も投稿されていますが、calc()関数についての質問は回答できません。 私は+と-の間のスペースの問題を知っていますが、今回は問題がこれに関連していません。

Iが正しく
width: calc((100% - 20px)/3);

同じ行に配置されるべき最後の画像を使用して行の3枚の画像を表示することができないが、それは下に移動です。それはmargin-right: 0なので、式calc((100% - 20px)/3)は、これらの3つの値を互いに隣り合って1行に保つべきです。

完全なコード

* { 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">

Answer 1

それは40pxの代わり20pxでなければなりません。

最後に1つを除いて、それぞれmargin-right: 20pxの3つの画像があります。だからであろう（3 * 20） - 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">

Answer 2

使用以下の溶液：

* { 
 
    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>

式にeの画像幅を計算する容器内の非常に画像：

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

Answer 3

margin-right: 20pxを有する2枚の画像があるので、線の幅は、次に、3（×2 20ピクセル）で割っ100% - 40pxであるべきです。

下記の改訂コードをご覧ください。.lastクラスを修正して、通常のCSSでレンダリングするようにしました。

* { 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">