中心div在flex div，同時保持長寬比

我想保留'c'中間的'a'，並填充30px 10px 10px 10px，以便它有更多的空間在頂部和平等從另一邊的房間。但是我希望box'c'不僅在這些邊界之間，而且在'a'內垂直和水平居中，當你使box'b'的寬度大於它縮小'a'和'c'以保持c的寬高比時，使'b'寬度變小並阻止'c'增長超過其極限並防止其溢出也是如此。另外'b'寬度/高度只會增長到200px。中心div在flex div，同時保持長寬比

這是模板，我在CSS的嘗試：

<div class='z'> 
<div class='a'> 
    <div class='c'></div> 
</div> 
<div class='b'> 
</div>

.z { 
    display: flex; 
    width: 300px; 
    height: 200px; 
} 

.a { 
    background-color: blue; 
    padding: 30px 10px 10px 10px; 
    flex: 1; 
} 

.b { 
    background-color: yellow; 
    width: 50%; 
    max-width: 200px; 
    transition: all 1s; 
} 

.c { 
    background-color: red; 
    margin: auto; 
    width: 100%; 
    padding-bottom: 100%; 
}

這是我的jsfiddle嘗試：http://jsfiddle.net/c8w79mLx/

來源

2015-02-23 luis

在這一點，你在找什麼？使用填充的「一個」盒子我使用絕對定位到c盒的FIDDLE

Insteed：

.c { 
    background-color: red; 
    margin: auto; 
    padding-bottom: 100%; 
    position:absolute; 
    bottom:10px;top:30px;right:10px;left:10px; 
}

來源

2015-02-23 09:13:31

否，我想在所有的時間爲中心的紅色框，拉伸時它必須十個分量它是縱橫比寬度=高度。當黃框的寬度太小時，它也不應該溢出。 – luis 2015-02-23 09:29:40

改變的CSS的一個類：

.a { 
background-color: blue; 
flex: 1; 
padding: 50px 10px; 
align-items: center;

}

和c類到：

.c { 
background-color: red; 
width: 100%; 
height: 100%;

}

小提琴這裏更新 - >http://jsfiddle.net/c8w79mLx/6/

來源

2015-03-04 16:23:51 Moto

中心div在flex div，同時保持長寬比

回答

相關問題