嘿那里它是可行的，以計算這在CSS？CSS calc()百分比余數乘除法

100％ - 650像素/ 2 * 100/100％

我有一個div contaniner與調整窗口大小長得那么在該容器中，我有一個iframe是最大寬度必須是650像素，我想十個分量對齊在容器的中心，使用左側為此，我用/ 2來確定的左側寬度和右側上的空間，我嘗試使用這個，但不起作用：

left: calc(((100% - 650px)/2) * (100/100%));

任何幫助將apreciated

謝謝

完整的CSS代碼：

#video_externo {

background: #222222;

text-align: center;

width: $c;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe,

video,

object,

embed {

position: absolute;

top: 0;

left: 0;

height: 100%;

max-height: 400px;

width: 100%;

max-width: 650px;

border: 0;

@media (min-width: 768px) {

left: calc((100% - 650px/2 * 100)/100%);

}

@media (min-width: 1024px) {

left: 0.7575757575757576%;

}

@media (min-width: 1200px) {

left: 9.375%;

top: 7.894736842105263%;

}

@media (min-width:1500px){

left: 20.72072072072072%;

top: 19.20115495668912%;

}

}

}

解決工作CSS：

#video_externo {

background: #222222;

text-align: center;

width: $c;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe,

video,

object,

embed {

position: absolute;

top: 0;

left: 0;

height: 100%;

max-height: 400px;

width: 100%;

max-width: 650px;

border: 0;

@media (min-width: 768px) {

left: 50%;

transform: translateX(-50%);

}

@media (min-width: 1200px) {

top: 7.894736842105263%;

}

@media (min-width:1500px){

top: 19.20115495668912%;

}

}

}

替代解決方案隨著Flexbox的：

#video_externo {

width: 100%;

display: flex;

justify-content: center;

background: #222;

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

iframe {

position: absolute;

width: 100%;

max-width: 650px;

height: 100%;

max-height: 400px;

top: 0;

left: 50%;

transform: translateX(-50%);

}

}

只是有與頂級的煩惱：我認為是填充到部隊顯示16：9視頻

2016-02-25

Erick ls

+0

所以你想對齊容器中心的最大寬度為650px的iframe？你可能不需要calc，你可以做'transform：translate(-50％);左：50％;' –

總結

以上是生活随笔為你收集整理的css除法,CSS calc（）百分比余数乘除法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。