讓孩子DIV佔用調整

Question

整個父空間我有一個有兩個元素的容器div。在調整一個內部div移動另一個。

但是這裏的要求是當一個div移動到另一個第一個div應調整父母的整個寬度時調整大小。

真正的問題有很多div。如果你想要，你也可以嘗試多個。但找到一個共同的解決方案

這裏的小提琴

div fiddle

通過HTML這裏和CSS

<div class="cont"> 
    <div class='inner'></div> 
    <div class='inner'><div> 
</div> 

先給一個CSS的解決方案，因爲我知道這個容器可以卡使用CSS來調整孩子的div。

.cont { 
    width:100%; 
    background-color:yellow; 
    overflow:hidden; 
    white-space:nowrap; 
    height:100px; 
} 
.inner { 
    width:200px; 
    height:80px; 
    margin:4px; 
    border:1px solid black; 
    float:left; 
    display:block; 
} 

Answer 1

我打了這一點，我能夠與媒體查詢來解決這個問題。查看演示here，這裏是代碼：

.cont { 
    width: 100%; 
    height: 100px; 
    overflow: hidden; 
    background-color: yellow; 
    overflow: hidden; 
    white-space: nowrap; 
} 

.inner { 
    width: 200px; 
    height: 80px; 
    margin: 4px; 
    border: 1px solid black; 
    float: left; 
    display: block; 
} 

@media (max-width: 435px) { 
    .inner { 
     width: auto; 
     float: none; 
     position: relative; 
     left: 0; 
     right: 0; 
    } 

    .cont { 
     height: auto; 
    } 
} 

Answer 2

您可能會嘗試給顯示值爲table-cell的顯示值。

檢查這個DEMO。