css除法,CSS calc（）百分比余数乘除法
嘿那里它是可行的，以計算這在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（）百分比余数乘除法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gawk linux,linux中ga
- 下一篇： html文字竖排垂直居中显示,CSS文字